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