西西軟件園多重安全檢測(cè)下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁(yè)編程開(kāi)發(fā)其它知識(shí) → 用幾種方法實(shí)現(xiàn)table隔行改變顏色風(fēng)格的技術(shù)

用幾種方法實(shí)現(xiàn)table隔行改變顏色風(fēng)格的技術(shù)

相關(guān)軟件相關(guān)文章發(fā)表評(píng)論 來(lái)源:本站整理時(shí)間:2011/2/23 8:51:51字體大。A-A+

作者:佚名點(diǎn)擊:546次評(píng)論:0次標(biāo)簽: table css

  • 類型:手機(jī)小說(shuō)大。103KB語(yǔ)言:中文 評(píng)分:5.2
  • 標(biāo)簽:
立即下載

以前在做頁(yè)面顯示列表時(shí)候,要做一組數(shù)據(jù)隔行變色,當(dāng)時(shí)不知道,竟然用來(lái)了好多js腳本判斷,寫(xiě)了許多像下面的例子。
Html代碼
<table>
<%int c =0;%>

//循環(huán)取列表

<%
if (c % 2 == 0)
{
className = "一種顏色";
} else
{
className = "另外一種顏色";
}
c++;
%>
<tr lcass="className">
<td></td>

</tr>

//循環(huán)結(jié)束

</table>

后來(lái)直接用css控制:
.Pop_TR{
background-color:expression(this.rowIndex%2==0 ? "一種顏色":"另一種顏色");
cursor:hand;
}
這樣,想展示上面的樣式,只需要這樣寫(xiě):
Html代碼
<table>
//循環(huán)取列表
<tr lcass="Pop_TR">
<td></td>

</tr>

//循環(huán)結(jié)束
</table>

css版只適用于低版本的IE,expression會(huì)死人的,如果頁(yè)面很復(fù)雜。還不如前面的切換2個(gè)class的簡(jiǎn)單方法可靠。

在高級(jí)瀏覽器中可以考慮使用css selector(流行的js庫(kù)基本都實(shí)現(xiàn)了一套):
tr:nth-child(2n+1) /* 奇數(shù)行 */
tr:nth-child(odd) /* 奇數(shù)行 */

tr:nth-child(2n+0) /* 偶數(shù)行 */
tr:nth-child(even) /* 偶數(shù)行 */

Jquery版:
JQuery的話也很簡(jiǎn)單
1.
通過(guò)定義倆個(gè)class來(lái)實(shí)現(xiàn)
$("tr:even").addClass("even-row");
$("tr:odd").addClass("odd-row");

2.
或者一行代碼
$("tr").each(function(i){this.style.backgroundColor['#ccc','#fff'][i%2]})


table控制:
做個(gè)table奇偶行區(qū)別顯示的css類就好了,這東西不復(fù)雜的

<tbody>
<s:iterator id="ip" status="status" value="ipUseList">
<tr class="<s:property value="#status.odd?'odd':'even'"/>">
<td><s:property value="#ip.subnet"/></td>
<td><s:property value="#ip.netmask"/></td>
<td><s:property value="#ip.city_name"/></td>
<td><s:property value="#ip.country"/></td>
<td><s:property value="#ip.subnetcomment"/></td>
</tr>
</s:iterator>
</tbody>

    相關(guān)評(píng)論

    閱讀本文后您有什么感想? 已有人給出評(píng)價(jià)!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過(guò)難過(guò)
    • 5 囧
    • 3 圍觀圍觀
    • 2 無(wú)聊無(wú)聊

    熱門(mén)評(píng)論

    最新評(píng)論

    發(fā)表評(píng)論 查看所有評(píng)論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評(píng)論需要經(jīng)過(guò)審核才能顯示)