css怎么控制table单双行

html-css032

css怎么控制table单双行,第1张

css控制table单双行的方法是获取到行号。

<style type="text/css">

#tb tr {

background-color: expression(

this.sectionRowIndex % 2 == 0 ? "#fff" : "#efefef"

)

TableSelect: expression(

this.sectionRowIndex == 0 ? "" :

(

onmouseover = function()

{

this.style.backgroundColor="#69CDFF"

},

onmouseout = function()

{

var color

if(this.sectionRowIndex % 2 == 0){

color = "#fff"

} else {

color = "#efefef"

}

this.style.backgroundColor=color

}

)

)

}

</style>

table如下:

<body>

<table cellspacing="1" class="FindAreaTable1" ID="DataGrid1">

<tr>

<td>首行首列</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

</tr>

<tr>

<td>行1首列</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

</tr>

<tr>

<td>行2首列</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

</tr>

<tr>

<td>行3首列</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

</tr>

<tr>

<td>行4首列</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

</tr>

<tr>

<td>行5首列</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

</tr>

</table>

</body>

</html>

你可以给标题所在行单独设置颜色样式。比如(假定标题在第一个tr标签内):

<style>

tr:nth-child(odd) {color:red} //奇数行(从标题行起算,下同)设为红色

tr:nth-child(even) {color:blue} //偶数行设为蓝色

tr:nth-child(1) {color:black} //第一行(标题行)设为黑色

</style>

<table border=1>

<tr><th>这是标题</th></tr>

<tr><td>这是第1行</td></tr>

<tr><td>这是第2行</td></tr>

<tr><td>这是第3行</td></tr>

<tr><td>这是第4行</td></tr>

<tr><td>这是第5行</td></tr>

<tr><td>这是第6行</td></tr>

<tr><td>这是第7行</td></tr>

<tr><td>这是第8行</td></tr>

</table>

改成这样:$("table:last tr:eq("+i+") td:even").css("background-color","#FF0")

都是单引号或者都是双引号,因为i是一个变量,选择器括号里面就是字符串的拼接