javascript实现table选中的行以指定颜色高亮显示的方法


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript实现table选中的行以指定颜色高亮显示的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table选中的行以指定颜色高亮显示</title>
<script type="text/javascript">
function IniEvent() {
  var tbl = document.getElementById("tblMain");
  var trs = tbl.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
 trs[i].onclick = TrOnClick;
  }
}
function TrOnClick() {
  var tbl = document.getElementById("tblMain");
  var trs = tbl.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="IniEvent()">
<table id="tblMain" border="1">
<tr>
  <td>1</td>
  <td>三星</td>
  <td>AA</td>
</tr>
<tr>
  <td>2</td>
  <td>Norkia</td>
  <td>BB</td>
</tr>
<tr>
  <td>3</td>
  <td>苹果</td>
  <td>CC</td>
</tr>
<tr>
  <td>4</td>
  <td>联想</td>
  <td>DD</td>
</tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
javascript实现table表格隔行变色的方法
May 13 #Javascript
javascript模拟评分控件实现方法
May 13 #Javascript
javascript动态设置样式style实例分析
May 13 #Javascript
javascript事件冒泡实例分析
May 13 #Javascript
javascript无刷新评论实现方法
May 13 #Javascript
javascript动态创建表格及添加数据实例详解
May 13 #Javascript
javascript动态创建链接的方法
May 13 #Javascript
You might like
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
python验证码识别实例代码
2018/02/03 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
django富文本编辑器的实现示例
2019/04/10 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
Python通过文本和图片生成词云图
2020/05/21 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
捷克玩具商店:Bambule
2019/02/23 全球购物
Eclipse面试题
2014/03/22 面试题
新闻编辑求职信
2014/04/09 职场文书
车辆工程专业求职信
2014/06/14 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
教师师德表现自我评价
2015/03/05 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL