javascript上下方向鍵控制表格行選中并高亮顯示的方法
本文實(shí)例講述了javascript上下方向鍵控制表格行選中并高亮顯示的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<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(); } //改變選擇項(xiàng)目 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程序設(shè)計(jì)有所幫助。
相關(guān)文章
js css實(shí)現(xiàn)垂直方向自適應(yīng)的三角提示菜單
這篇文章主要為大家詳細(xì)介紹了js css實(shí)現(xiàn)垂直方向自適應(yīng)的三角提示菜單的相關(guān)資料,需要的朋友可以參考下2016-06-06探析瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序
本文主要基于向HTML頁面引入JavaScript的幾種方式,分析HTML中JavaScript腳本的執(zhí)行順序問題,通過本文給大家分享瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序,對瀏覽器執(zhí)行javascript及執(zhí)行順序相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01JavaScript實(shí)現(xiàn)提交模式窗口后刷新父窗口數(shù)據(jù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)提交模式窗口后刷新父窗口數(shù)據(jù)的方法,涉及javascript窗口交互的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06document.documentElement和document.body區(qū)別介紹
body是DOM對象里的body子節(jié)點(diǎn),即body標(biāo)簽,documentElement 是整個節(jié)點(diǎn)樹的根節(jié)點(diǎn)root,詳細(xì)介紹請看本文,感興趣的朋友可以參考下2013-09-09Firefox中beforeunload事件的實(shí)現(xiàn)缺陷淺析
beforeunload 指在頁面卸載前提供的最后一次JS執(zhí)行的機(jī)會2012-05-05Lerna入門之管理TypeScript monorepo教程
這篇文章主要為大家介紹了Lerna入門之管理TypeScript monorepo教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11