js table鼠标点击时变色
<head>
<title></title>
<script type="text/javascript">
//鼠标移动到表格行,被点击的行高亮显示(背景是红色),其他行白色背景。监听每个tr的onclick事件,将点击的背景设置为黄色,其他的设置为白色背景。//对于table、div、span这类型元素没有onfocus(获取焦点的事件(无法触发这些事件。))
onload = function () {
//获取行
var trs = document.getElementById('tb').getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = function () {
for (var j = 0; j < trs.length; j++) {
trs[j].style.backgroundColor = '';
}
this.style.backgroundColor = 'red';
};
}
};
</script>
</head>
<body>
<table border="1" id="tb" style=" cursor:pointer;">
<tr>
<td>周润发
</td>
<td>刘德华
</td>
<td>周星驰
</td>
</tr>
<tr>
<td>周润发
</td>
<td>刘德华
</td>
<td>周星驰
</td>
</tr>
<tr>
<td>周润发
</td>
<td>刘德华
</td>
<td>周星驰
</td>
</tr>
<tr>
<td>周润发
</td>
<td>刘德华
</td>
<td>周星驰
</td>
</tr>
<tr>
<td>周润发
</td>
<td>刘德华
</td>
<td>周星驰
</td>
</tr>
<tr>
<td>周润发
</td>
<td>刘德华
</td>
<td>周星驰
</td>
</tr>
</table>
</body>
最新文章
- Java进击C#——应用开发之Asp.net MVC
- linux下crontab命令的使用
- Centos版Linux 一些常用操作命令
- Winform开发框架之介绍
- ORM框架
- iOS中 项目开发易错知识点总结
- JAVA调用C语言写的SO文件
- canvas绘图动画细节
- 【BZOJ】【2756】【SCOI2012】奇怪的游戏
- 卷积神经网络Convolutional Neural Networks
- 客户调用COM流程
- 像素转换mm
- [Git] Automatically running tests before commits with ghooks
- Codeforces 700B Connecting Universities(树形DP)
- 3406: [Usaco2009 Oct]Invasion of the Milkweed 乳草的入侵
- 在类的成员函数中调用delete this
- markdown生成的a标签如何在新页面打开
- webpack 内存溢出 Allocation failed - JavaScript heap out of memory
- python-面向对象之继承
- 基于alpine用dockerfile创建的nginx镜像
热门文章
- C - The C Answer (2nd Edition) - Exercise 1-6
- Android动态修改图片颜色的实现方式分析
- php面试题11(边看边复习刚刚讲的)(array_multisort($arr1,$arr2); 用$arr1来排序$arr2。)
- PatentTips - Well bias control circuit
- [NPM] Run npm scripts with git hooks
- <;a href=&#39;javacript:&#39; title=&#39;{$str}&#39;>;是什么意思(多看学习视频)
- php数学和时间常用函数有哪些(总结表)(看学习视频效率挺高的)(复习)
- 使用CentOS7卸载自带jdk安装自己的JDK1.8
- POJ 3714 Raid(平面近期点对)
- tensorflow 函数接口的理解