您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 表格图层 >

JS点击表格单元格变色

时间：2013-11-08 13:25 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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 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>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

JavaScript代码实现点击表格单元格后变色，不是鼠标移上时候变色，点击也就是确认的意思，点击后单元格所在行都变色。主要是使用DOM操作实现的，DOM可以很好的解决Netscape的JavaScript和Microsoft的JScript之间的冲突。

JS点击表格单元格变色由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/biaoge/6445.html

标签：网站源码

上一篇：jquery+html5+canvas饼形图表特效

下一篇：jquery表单提示，输入时提示文字滑动向上

[表格图层] 可关闭jQuery浮动层插件，点击按

[表格图层] jquery鼠标移到Image图片上时显

[表格图层] HTML5环境amcharts.js饼图插件演

[表格图层] 在同一个页面设置两个选项卡菜单

[表格图层] jquery伸缩导航条点击向下展开

[表格图层] 解决div总是被select遮挡的问题

[表格图层] JS点击表格单元格变色

[表格图层] AJAX仿EXCEL表格功能

[表格图层] jQuery点击展开本列表内容隐藏其

[表格图层] DIV未知高度的垂直居中代码，兼

[表格图层] 最少代码实现的的网页瀑布流效果

[表格图层] Js可点击展开关闭的广告代码

相关内容推荐

div被select遮挡

东莞网站优化

网页设计工作室

新闻贴图评测

系统程序下载

网页图标矢量设计素材

百度关键字优化精灵

dedecms加上alt

视频播放器

ASP.NET学习视频教

MySQL安装指南

新闻贴图优点

Ajax表单验证

对话聊天图标

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1