<script type="text/javascript">
//鼠标移动高亮显示
function cells_color() {
var oColor, td = event.srcElement
if (td.tagName != "TD")
return;
if (event.type == "mouseover")
oColor = "#dedede"
else oColor = "#ffffff"
tr = td.parentElement
tb = tr.parentElement
for (var i = 0; i < tr.cells.length; i++) //行高亮
tr.cells[i].bgColor = oColor
//for (var i = 0; i < tb.rows.length; i++) //列高亮
// tb.rows[i].cells[td.cellIndex].bgColor = oColor
}
</script>
<table border="0" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()">
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
//鼠标移动高亮显示
function cells_color() {
var oColor, td = event.srcElement
if (td.tagName != "TD")
return;
if (event.type == "mouseover")
oColor = "#dedede"
else oColor = "#ffffff"
tr = td.parentElement
tb = tr.parentElement
for (var i = 0; i < tr.cells.length; i++) //行高亮
tr.cells[i].bgColor = oColor
//for (var i = 0; i < tb.rows.length; i++) //列高亮
// tb.rows[i].cells[td.cellIndex].bgColor = oColor
}
</script>
<table border="0" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()">
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
第二种
<script type="text/javascript">
$(document).ready(function () {
//方式一
//$("#tblContent tr:nth-child(even)").css({ "background-color": "#E4F5FF" });
//方式二
$("#tblContent tr:even").css("background-color", "#fff"); //奇数行
$("#tblContent tr:odd").css("background-color", "#E4F5FF");//偶数行
});
function cells_color() {
$("#tblContent tr").mouseover(function () {
$(this).css({ "background-color": "#87CEEB" });
}).mouseout(function (event) {
var $index = $(this).index();
if ($index % 2 == 0) {
$(this).css({ "background-color": "#fff" });
} else {
$(this).css({ "background-color": "#E4F5FF" });
}
});
}
</script>
<table id="tblContent" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()" border="1" cellpadding="1" cellspacing="0" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()">
<tbody id="ttr">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr><tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr><tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr><tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr><tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
单击表格变换颜色
<script>
function bgChange(obj){
obj.bgColor=obj.bgColor==""?"#0099ff":"";
}
</script>
<table width="80%" border="1">
<tr οnclick="bgChange(this)"><td>a</td><td>a</td></tr>
<tr οnclick="bgChange(this)"><td>a</td><td>a</td></tr>
<tr οnclick="bgChange(this)"><td>a</td><td>a</td></tr>
</table>