首页 > 编程 > JavaScript > 正文

javascript上下方向键控制表格行选中并高亮显示的方法

2019-11-20 13:09:24
字体:
来源:转载
供稿:网友

本文实例讲述了javascript上下方向键控制表格行选中并高亮显示的方法。分享给大家供大家参考。具体实现方法如下:

<style>tr.highlight { background:#08246B; color:white;}</style><table border="1" width="70%" id="ice"> <tr onClick="selectTR();return false;">  <td>123</td>  <td>234</td>  <td>abc</td>  <td>def</td> </tr> <tr onClick="selectTR();">  <td>123</td>  <td>234</td>  <td>abc</td>  <td>def</td> </tr> <tr onClick="selectTR();">  <td>123</td>  <td>234</td>  <td>abc</td>  <td>def</td> </tr> <tr onClick="selectTR();">  <td>123</td>  <td>234</td>  <td>abc</td>  <td>def</td> </tr> <tr onClick="selectTR();">  <td>123</td>  <td>234</td>  <td>abc</td>  <td>def</td> </tr></table><script language="javascript"> <!-- var currentLine = -1; document.onkeydown = function(e)  {   e = window.event || e;   switch(e.keyCode)    {     case 38:       currentLine--;       changeItem();       break;     case 40:       currentLine++;       changeItem();       break;     default:       break;   } } function selectTR(){ currentLine=window.event.srcElement.parentElement.rowIndex; //alert(currentLine); changeItem();}//改变选择项目 function changeItem() {   if(document.all)     var it = document.getElementById("ice").children[0];   else     var it = document.getElementById("ice");  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>

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表