实现 Table 的行交替颜色、选中行变色的一种方法。演示+源码

.css_Grid1
{
padding:3px;
border:1px;
border-width:1px;
border-color:#ffee00;
width:100%;
border-collapse:collapse;
}
.css_Grid
{
color:Black;
background-color:#ffffee;
border-color:#5D7B9D;
border-width:1px;
border-style:solid;
width:450px;
}
.css_GridTR
{
color:White;
background-color:#5D7B9D;
}
td
{
font-size: 9pt;
padding:3px;
}
.css_TR_c1
{
background-color:#ffffee ;
color:#000000;
}
.css_TR_c2
{
background-color:#ffffaa ;
color:#993300;
}
.css_TR_move
{
background-color:#eaa ;
color:#123456;
}
.css_TR_CK
{
background-color:#ee0 ;
color:#333333;
}

借用了一下园子里的新闻的标题 :) 使用css和js实现。

新闻标题	添加时间	人气
iPhone 3G拆解图	08-07-27	00,002
奥运核心资源被分食 搜狐央视网谁忽悠谁？	08-07-27	1,234,567
微软推增强浏览器插件IE7Pro 助IE一臂之力	08-07-27	00,123
智联招聘70%股权换1.1亿美元巨额融资	08-07-27	08,888
前Google员工推搜索引擎Cuill 3倍Google网页数	08-07-27	00,654
WCG中国区落幕 一代新人换旧人	08-07-27	00,003

var clickClass = "";
var moveClass = "";
var clickTR ;
var moveTR ;
function Move(me)
{
if (clickTR != me)
{
if (moveTR != me)
{
moveClass = me.className;
moveTR = me;
me.className = "css_TR_move";
//alert("a");
}
}
}

function Out(me)
{
if (clickTR != me)
{
moveTR = null;
me.className = moveClass;
}
}
function Ck(me,dataID)
{
if (clickTR != me)
{
if (clickTR)
{
clickTR.className = clickClass;
}
clickTR = me;
clickClass = moveClass;
}
alert("您选择的记录ID：" + dataID);
me.className = "css_TR_CK";
}




如果您想看源代码的话，IE的菜单栏，查看>源文件，您就能看到了。






.css_Grid




{

}{


color:Black;


background-color:#ffffee;


border-color:#5D7B9D;


border-width:1px;


border-style:solid;


width:100%;





}




.css_GridTR




{

}{


color:White;


background-color:#5D7B9D;





}


td




{

}{


font-size: 9pt;


padding:3px;


}




.css_TR_c1




{

}{


background-color:#ffffee ;


color:#000000;


}


.css_TR_c2




{

}{


background-color:#ffffaa ;


color:#993300;


}




.css_TR_move




{

}{


background-color:#eaa ;


color:#123456;


}




.css_TR_CK




{

}{


background-color:#ee0 ;


color:#333333;


}





<script type="text/jscript" language="javascript">


var clickClass = "";


var moveClass = "";


var clickTR ;


var moveTR ;


function Move(me)






{


if (clickTR != me)






{


if (moveTR != me)






{


moveClass = me.className;


moveTR = me;


me.className = "css_TR_move";


//alert("a");


}


}


}





function Out(me)






{


if (clickTR != me)






{


moveTR = null;


me.className = moveClass;


}


}


function Ck(me,dataID)






{


if (clickTR != me)






{


if (clickTR)






{


clickTR.className = clickClass;


}


clickTR = me;


clickClass = moveClass;


}


//alert("您选择的记录ID：" + dataID);


me.className = "css_TR_CK";


}


</script>