【제목】[원본] 표 셀의 인터레이스 채색 【Abstract】시간과 주기에 따라 공간을 교환하여 색상을 결정합니다. [환경]jQuery [저자]wintys(wintys@gmail.com) http://wintys.cnblogs.com [내용]: 1. 효과 2. 문제 설명 아래 표의 셀에 인터레이스 컬러링을 수행합니다. 테이블의 HTML 태그와 콘텐츠가 결정되었습니다. 코드 복사 코드는 다음과 같습니다. TR0-TD0 TR0-TD1 TR0-TD2 a>< ;/td> TR0-TD3 /tr> TR1-TD0 >TR1-TD1 TR1-TD2 TR1-TD3 >TR2-TD1< /td> TR2-TD2 a href= "http://www.yunyun.com/">TR2-TD3 ;< a href="http://www.yunyun.com/">TR3-TD0 TR3-TD1 TR3-TD2< /a> TR3-TD3 ;/tr> 3.1, CSS 🎜>코드 복사 코드는 다음과 같습니다. 🎜>.tableitem0 { <br>배경: 없음 반복 스크롤 0 0 #F65314 <div class="codetitle">색상: #FFFFFF; <span>} <a style="CURSOR: pointer" data="74936" class="copybut" id="copybut74936" onclick="doCopy('code74936')">.tableitem1 { <u>배경: 없음 반복 스크롤 0 0 #7CBB00; 🎜>색상: #FFFFFF </u>} </a>.tableitem2 { </span>배경: 없음 반복 스크롤 0 0 #00A1F1 </div>색상: #FFFFFF <div class="codebody" id="code74936">} <br>.tableitem3 { <br>배경: 없음 반복 스크롤 0 0 <br>색상: #FFFFFF; <br>} <br>#tablecontainer td { <br>패딩: <br>} <br>.tableitem { <br> 너비: 15%; <br>} <br>.tableitem a { <br>글꼴 크기: 18px; <br>여백: 0 자동; 패딩: 15px 20px; <br>텍스트 정렬: <br>border-bottom:none; <br>} <br>.tableitem a:hover, .tableitem a:visited { <br>color: #FFFFFF ! 중요; <br>} <br>.tableitem a:hover, .tableitem a:active{ <br>불투명도: 0.8; <br>} <br> 3.2 , JS 코드 코드 복사 코드는 다음과 같습니다. <br>function setTableStyle(){ <br>$("#tablecontainer tr").each(function(i){//모든 tr 가져오기 , 각 루프 탐색을 수행하고 각 <br>var tr = $(this);//이 루프에서 tr 가져오기 <br>setTableItemStyle(tr,i%4);//각 행 4개 셀, 4개 색상은 주기적으로 인터레이스되어 색상이 지정됩니다. <br>var tableitem = ["tableitem0","tableitem1","tableitem2","tableitem3","tableitem0","tableitem1","tableitem2"] <br>for(var i = 0; i < 4 ;i ){ <BR>var td = tr.children("td").eq(i); <BR>var td_a = td.find("a") <BR>td.addClass("tableitem") ; <BR>//[핵심]: base는 시작 색상을 결정하고, i는 이번에 색칠해야 할 셀을 결정합니다. <BR>td_a.addClass(tableitem[base i]); <BR>} <BR>} <BR>$(function(){ <BR>setTableStyle(); <BR>}); 스크립트> <br><br> </div> </div></a></td> </tr> </div>