示例如下:

css中table tr:nth-child(even)改变tr背景颜色: IE7,8无效,nth-childtr

例如:

.my_table tr:nth-child(even){
background:#E6EDF5;
}

.my_table tr:nth-child(odd){
background:#F0F5FA;
}

IE7,8无效,无法识别。   换一种方法: 给需要变色的tr加上class

.table_border table tr.even{background: #f8f8fb;}

方法三:jquery实现

$(".nav ul li div a:nth-child(even)").css({'background':'red'});
$(".nav ul li div a:nth-child(odd)").css({'background':'grey'});

在网上看了看 还有第四种方法:

tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}

但是实践的时候发现第四种完全没有反应,如果你实践了有效果,请说说其中的原因吧。

 第四种方法参考地址:

 

tr:nth-child(even)改变tr背景颜色:
IE7,8无效,nth-childtr 例如: .my_table
tr:nth-child(even){background:#E6EDF5;}.my_table
tr:nth-child(odd){background:#F…

protected void dgSjygl_ItemDataBound(object sender,
DataGridItemEventArgs e)
    {
        if ((e.Item.ItemType == ListItemType.Item) ||
(e.Item.ItemType==ListItemType.AlternatingItem))
        {
            //当鼠标移到的时候设置该行颜色
            e.Item.Attributes.Add(“onmouseover”,
“currentcolor=this.style.backgroundColor;this.style.backgroundColor=’#6699CC'”);
            //当鼠标移走时还原该行的背景色
            e.Item.Attributes.Add(“onmouseout”,
“this.style.backgroundColor=currentcolor”);
        }
    }

复制代码 代码如下:

 

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=GBK”>
<title>鼠标经过给tr换颜色</title>   
</head>
<body>
<table align=”center” width=”100%” border=”1″ cellspacing=”1″
cellpadding=”1″ >
  <tr style=”cursor:hand ” onmousemove=”changeTrColor(this)”>
    <td align=”center”>1</td>
    <td height=”20″> 123</td>
    <td height=”20″> abvx</td>
    <td height=”20″> 465465</td>
    <td height=”20″>546654654</td>
  </tr>
  <tr style=”cursor:hand ” onmousemove=”changeTrColor(this)”>
    <td align=”center”>1</td>
    <td height=”20″> 123</td>
    <td height=”20″> abvx</td>
    <td height=”20″> 465465</td>
    <td height=”20″>546654654</td>
  </tr>   
  <tr style=”cursor:hand ” onmousemove=”changeTrColor(this)”>
    <td align=”center”>1</td>
    <td height=”20″> 123</td>
    <td height=”20″> abvx</td>
    <td height=”20″> 465465</td>
    <td height=”20″>546654654</td>
  </tr>
</table>
<script type=”text/javascript”>
function changeTrColor(obj){   
    var _table=obj.parentNode;
    for (var i=0;i<_table.rows.length;i++){
        _table.rows[i].style.backgroundColor=””;
    }   
    obj.style.backgroundColor=”blue”;
}
</script>
</form>
</body>
</html>

在DataGrid 里面的ItemDataBound事件

复制代码 代码如下: html head meta
http-equiv=”Content-Type” content=”text/html; charset=GBK”
title鼠标经过给tr换颜色/title /head body table align=”ce…

//颜色交替显示
图片 1        if (e.Item.ItemIndex >= 0 && e.Item.DataItem is DataRowView)
        {
            DataRowView row = (DataRowView)e.Item.DataItem;
            int numj = e.Item.Cells.Count;
            for (int j = 0; j < numj; j++)
          {
                e.Item.Cells[j].ForeColor = System.Drawing.Color.Pink;
                e.Item.Cells[j].BackColor = System.Drawing.Color.Blue;
            }
        }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图