直接上代码代码有注释 可以copy测试
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>点击table行后之前点击的行恢复为自己原来的颜色</title>
<script type="text/javascript">
<!--需要定义另个全局变量，index：行索引，oldColor：行本来的颜色-->
var oldColor;
var index;
<!--思路：在点击某一行时保存这一行本来的背景颜色，和索引，点击另一行时再得到保存的颜色和索引对上次点击行进行背景颜色赋值，再将本次点击行的行索引和背景颜色进行保存，重复此步骤-->
function changeIndex(obj) {
<!--第一次点击的时候index为null，需要判断-->
if(index!=null){
<!--设置上次点击的行的原来的背景颜色-->
document.getElementById("tbl").rows[index].style.backgroundColor = oldColor;
}
<!--保存本次点击行的行索引和背景颜色-->
index = obj.rowIndex;
oldColor = obj.style.backgroundColor;
<!--设置点击行的颜色-->
obj.style.backgroundColor="#CC0033";
}
</script>
</head>
<body>
<table id="tbl">
<tr οnclick="changeIndex(this);" style="background-color:#FFCC99;"> <td>#FFCC99;</td></tr>
<tr οnclick="changeIndex(this);" style="background-color:#0066CC;"> <td>#0066CC;</td></tr>
<tr οnclick="changeIndex(this);" style="background-color:#0066CC;"> <td >#0066CC;</td></tr>
<tr οnclick="changeIndex(this);" style="background-color:#FFCC99;"><td >#FFCC99;</td></tr>
</table>
</body>
</html>
7327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
