直接上代码代码有注释 可以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){
<!--设置上次点击的行的原来的背景颜色-->
ElementById("tbl").rows[index].style.backgroundColor = oldColor;
}
<!--保存本次点击行的行索引和背景颜色-->
index = wIndex;
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>
本文发布于:2024-01-28 08:27:50，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17064016746107.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
