从你的代码看,是要实现隔行变色是吧
1.首先,你var tabNode = document.getElementsByTagName("table")获得所有的表对象
2.但在取行的时候,你那样是取不到行对象的.
3.id,name,标签都不是
所以你这个代码不能实现,不只是因为变量声明在哪的问题,
当然,要声明肯定是在trcolor()函数里面,下面的代码有不如意的地方,
欢迎指出.你用的是通过直接操作css样式,和你的代码稍微有点不同.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/**
js版隔行变色
*/
function changeColor() {
var tableMain = document.getElementById("talbeMain");//通过id获得表格对象
if (tableMain != null) {
var trs = tableMain.getElementsByTagName("tr");//通过标签获得行
for (var i = 0; i < trs.length; i++) {
var tr = trs[i];
//tr.style.crusor = "hand";//firfox不支持,ie通过
tr.style.cursor = "pointer";//设置鼠标变为小手状
tr.onmouseover = function() {
this.style.backgroundColor = "red";//背景变为红色
}
tr.onmouseout = function() {
this.style.backgroundColor = "White";//背景变为白色
}
}
}
}
window.onload = changeColor;
/**
JQuery版隔行变色
1.首先通过 $("#talbeMain tr")取得行对象
2.设置鼠标移动到行的事件
3.链式编程
*/
$(function() {
$("#talbeMain tr").mouseover(function() {
$(this).css("backgroundColor", "red").css("cursor","pointer");
}).mouseout(function() { $(this).css("backgroundColor","White")});
});
</script>
</head>
<body>
<table id="talbeMain">
<tr><td>first</td></tr>
<tr><td>second</td></tr>
<tr><td>thrid</td></tr>
<tr><td>four</td></tr>
</table>
</body>
</html> |
收藏
淘帖
踩
