【タイトル】【原文】表セルのインターレース着色【要約】空間を時間と周期に交換して色を決定します。 【環境】jQuery 【作成者】wintys (wintys@gmail.com) http://wintys.cnblogs.com 【内容】: 1. 効果 2. 問題の説明 以下の表のセルにインターレース色を実行します。表内の HTML タグと内容が決定されました。 コードをコピー コードは次のとおりです: TR0-TD0 TR0-TD1TR0-TD2 TR0-TD3< /tr> TR1-TD0 >TR1-TD1TR1-TD2 TR1-TD3 TR2-TD0 TR2-TD1< /td> TR2-TD2 a href= "http://www.yunyun.com/">TR2-TD3 ;< a href="http://www.yunyun.com/">TR3-TD0 TR3-TD1TR3-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"> >背景: なし繰り返しスクロール 0 0 #FFBB00; <br>色: #FFFFFF; <br>} <br>#tablecontainer td { <br>パディング: <br>} <br>.tableitem { <br>幅: 15%; <br>} <br>.tableitem { <br>表示: ブロック; <br>高さ: 35 ピクセル;パディング: 15px 20px; <br>text-align: center; <br>border-bottom:none; <br>.tableitem a:hover, .tableitem a:visited { <br>color: #FFFFFF !重要; <br>} <br>.tableitem a:hover, .tableitem a:active{ <br>不透明度: 0.8; <br>} <br><br> <br>3.2 , JSコード <br> <br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです。<br><div class="codebody" id="code52910"> <br><script type="text/javascript"> <br>function setTableStyle(){ <br>$("#tablecontainer tr").each(function(i){//Get all 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 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> </div>
