键盘的上下方向键 引起Table的行变色
代码如下:
也是要循环判断每个的M<tr>
也是要循环判断每个的M<tr>
<style>
.highlight
{
background:#08246B;
color:white;
}
</style>
<table border="1" width="70%" id="ice">
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
</table>
<script language="javascript">
<!--
var currentLine = -1;
document.onkeydown = function ()
{
//alert(event.keyCode);
switch (event.keyCode)
{
case 38:
currentLine--;
changeItem();
break;
case 40:
currentLine++;
changeItem();
break;
default :
break;
}
}
//改变选择项目
function changeItem()
{
var it = document.getElementById("ice");//.children[0];
for (i=0;i<it.rows.length;i++)
{
it.rows[i].className = "";
}
if (currentLine < 0)
currentLine = it.rows.length - 1;
if (currentLine == it.rows.length)
currentLine = 0;
it.rows[currentLine].className = "highlight";
}
//-->
</script>
.highlight
{
background:#08246B;
color:white;
}
</style>
<table border="1" width="70%" id="ice">
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
<tr><td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td></tr>
</table>
<script language="javascript">
<!--
var currentLine = -1;
document.onkeydown = function ()
{
//alert(event.keyCode);
switch (event.keyCode)
{
case 38:
currentLine--;
changeItem();
break;
case 40:
currentLine++;
changeItem();
break;
default :
break;
}
}
//改变选择项目
function changeItem()
{
var it = document.getElementById("ice");//.children[0];
for (i=0;i<it.rows.length;i++)
{
it.rows[i].className = "";
}
if (currentLine < 0)
currentLine = it.rows.length - 1;
if (currentLine == it.rows.length)
currentLine = 0;
it.rows[currentLine].className = "highlight";
}
//-->
</script>
学习,积累中......