JS点击表格单元格变色，只能点中一行JS代码[table表格变色]_中国网站频道，官方网站，中国品牌网站，网页特效，JS广告，网站截图，酷站推荐，图标，APP，按钮，中国网站第一品牌频道网站频道，div css，flash广告代码，网页特效，png图片，后台模板，flash特效，软件下载，中文字体下载，英文字体下载，

> 代码 > 表格

JS点击表格单元格变色，只能点中一行JS代码[table表格变色]

作者：vip_260 来源：日期：2014/2/25 11:29:52 人气：标签：

<!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>JS点击表格单元格变色，只能点中一行JS代码</title>
<script type="text/javascript">
function initEvent() {
//获取id为tableColor的表格
var tableCol = document.getElementById("tableColor");
//获取表格中所有的行
var trs = tableCol.getElementsByTagName("tr");
//循环遍历所有行
 for (var i = 0; i < trs.length; i++) {
    var tr = trs[i];
    //动态给当前行注册点击事件
    tr.onclick = tronClick;
    //设置鼠标样式
    tr.style.cursor = "pointer";
  }
}
function tronClick() {
  var tableCol = document.getElementById("tableColor");
  var trs = tableCol.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
    //若点击当前行，则变为黄色
    if (trs[i] == this) {
      trs[i].style.background = "yellow";
    }
    //其他所有行变为白色
    else {
      trs[i].style.background = "white";
    }
  }
}
</script>
  </head>
  <body onload="initEvent()">
    <table id="tableColor" border=1px>
      <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr>
      <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr>
      <tr><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td><td>****</td></tr>
    </table>
  </body>
</html>

提示：复制和保存代码功能在FF下无效。

公告

更新

> 代码 > 表格

JS点击表格单元格变色，只能点中一行JS代码[table表格变色]