jQuery 的表格資料列選取

2008-08-04

3987
0
jQuery
2011-01-24

早期我們在寫asp的時候為了達到使表格的每一列資料有所區隔通常會作成
單數列一種樣式
雙數列一種樣式
這樣看起來會比較輕鬆
每一筆資料分的很清楚

早期我們在寫asp的時候為了達到使表格的每一列資料有所區隔通常會作成

單數列一種樣式

雙數列一種樣式

這樣看起來會比較輕鬆

每一筆資料分的很清楚

但是在寫code的時候常常會寫成類似這樣

	<table border="1">
<%for i = 1 to 10%>
<%if i mod 2 = 0 then%>
<tr style="color:red;"><td>這是雙數列</td><tr>
<%else%>	
<tr style="color:Blue;"><td>這是單數列</td><tr>
<%end if%>	
<%next%>
</table>

這是在普遍不過的做法了

現在jQuery有一種更快的方法

	$(document).ready(function(){
    $("#tableName tr:even").css({
        border:"solid 10px #000000",
        fontSize:"20px"
    })
    $("#tableName tr:not(:even)").css({
        border:"solid 10px #000000",
        fontSize:"60px"
    })        
})

html部分就只要類似這樣

	<table border="1">
<%for i = 1 to 10%>
<tr><td>...</td><tr>	
<%next%>
</table>

只要運用一下選擇器就可以輕鬆達成

再也不必跑迴圈作運算囉

$("#tableName tr:not(:even)")也可以寫成

$("#tableName tr:odd") 怎麼用就端看你的喜好囉

回首頁