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 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
js实现无缝轮播图特效
May 09 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中防止SQL注入最好的方法是什么
2013/06/10 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
ktv总经理岗位职责
2014/02/17 职场文书
文明班集体申报材料
2014/05/23 职场文书
全陪导游词开场白
2015/05/29 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
Java数据结构之堆(优先队列)
2022/05/20 Java/Android