일반적인 웹프로그래밍 방식으로 행마다 색 변하게 하는 방법은 아주 간단하다.

위의 예제는 asp로 예를 들었지만 대개 mod 함수를 이용해서 즉, 나머지 함수를 이용해서 1 이면 흰색 0이면 cccccc의 회색이 되도록 한다. 이런 아주 간단하게 행마다 격으로 색을 바꾸는 방법이 TDC에 적용할때는 괴롭다. 한번 나름대로 어떻게 해야하는지 곰곰히 생각해보면 의외로 답이 안나옴을 알수 있을것이다. -_-;

아래 코드는 어설프게나마 행마다 격으로 색이 변하게 하는 방법이다. 실제로 개발하면서 내가 쓴일은 없고 다른 사람이 어떻게 하냐고해서 고민고민끝에 만들어 본거다. 아래코드의 한가지 단점이 있다면 처리속도가 느려지만 색이 안바뀐다. -_-; 일반적인 홈페이지정도의 수준은 괜찮지만 대기업 데이타 이용했을때 처리속도가 몇초가 넘어버리니 아래 코드가 안먹었다. 그래서 시간 설정해주고 체크해서 어찌 저찌 괴롭게 처리하긴 했는데 그 소스는 정리하기 귀찮아서 그냥 여기서 소개안한다.

혹 대강이라도 어떤 방식인지 보고 싶다면 http://www.mungchung.com/mianamssi/zboard/view.php?id=protip&no=92 여기 가보면 된다. 코멘트로 내가 남겨두었다 (김발똥은 내 인터넷명칭 -_-)

간단하므로 소스 설명 역시나 간단하다. 단지 색으로 강조한 부분만 잘 보면 된다. 맨 아랫 부분의 파란색 코드가 추가된 부분이다.

아래는 소스코드이다.

<OBJECT id=List CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
    <PARAM NAME="UseHeader" VALUE="true">
    <PARAM NAME="DataURL" VALUE="list.txt">
    <PARAM NAME="TextQualifier" VALUE="|">
    <param NAME="FieldDelim" VALUE="¶">
    <PARAM NAME="RowDelim" VALUE="^">
    <PARAM NAME="CharSet" VALUE="euc-kr">
</OBJECT>

<table DataSrc="#List" id="oTbl" bgcolor="#CBCBCB" border="0" cellspacing="1" cellpadding="5">
    <thead>
    <tr bgcolor="#E3F1F7">
        <td>가수</td>
        <td>곡명</td>
    </tr>
    <tr id="loading">
            <td colspan="2" align="center">Loading...</td>
    </tr>
    </head>
    <tbody>
    <tr bgcolor="#FFFFFF" id="data">
        <td><span datafld="Name" DATAFORMATAS="HTML"></span></td>
        <td><span datafld="SongName" DATAFORMATAS="HTML"></span></td>
    </tr>
    </tbody>        
</table>

<script for="List" event="ondatasetcomplete">
    var rs = List.recordset;
    if (!rs.eof) {
        loading.style.display = "none";
    }
</script>
<script language="javascript">
    function window.onload() {
        fnGiveRowsBgColor(oTbl);
    }
    // 한 Row씩 색 변하도록 해주는 함수
    function fnGiveRowsBgColor(obj) {
        var nTotal = obj.rows.length;
        
        for (i=0;i<nTotal;i++) {
            //alert(i+"__"+obj.rows[i].tagName+obj.rows[i].id);
        }
        for( i=2 ; i < nTotal ; i+=2) {
            obj.rows[i].style.backgroundColor = "#F8F8F8"
        }
    }
</script>

윈도우 onload 할때 fnGiveRowsBgColor 함수를 실행시킨다. 이 fnGiveRowsBgColor 함수에선 인자로 받은 테이블의 id값을 가지고 테이블의 행이 몇개인지(obj.rows.length) 검사한다. 그래서 그 행만큼 루프돌면서 격으로 색을 바꿔준다.