代码改变世界

表格行样式

2010-03-29 18:39  三皮开发时  阅读(427)  评论(0)    收藏  举报

//DataGrid样式:
private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) {
if (e.Item.ItemType!=ListItemType.Header){
      e.Item.Attributes.Add("onmouseover", "this.oldcolor=this.style.backgroundColor;this.style.backgroundColor='#C8F7FF'");
     e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor=this.oldcolor");
     e.Item.Attributes.Add("onclick","this.style.backgroundColor='red';this.style.cursor='hand';");
    }
   }

//DataList样式:

在DataList的ItemTemplate里写入一个表,其中tr设置如下

<TR onmouseover="this.style.backgroundColor='#FFFFFF'" onmouseout="this.style.backgroundColor=''">

-----------------------------------------------------------------------------------------------------------------

JQuery实现

js文件

/// <reference path="../js/jquery-1.3.2-vsdoc.js" />
$(function() {
    $("#tt tr").mouseover(function() {
        $(this).removeClass("oddClass");
        $(this).addClass("contentHaveDiv_over");       
    });
    $("#tt tr").mouseout(function() {
    $(this).removeClass("contentHaveDiv_over");
    $("#tt tr:even").addClass("oddClass");
    });
    $("#tt tr:even").addClass("oddClass");
})

css文件

.contentHaveDiv_over
{
  background:#cccccc;
  color:white;
}
.contentHaveDiv_over a
{
  color:white;
}
.oddClass
{
 background:#ecf6fc;
}

--说明:tt为DataList外的一个div