この記事では、JavaScriptの上下矢印キーによるテーブル行の選択と強調表示を制御する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
<style> tr.highlight {background:#08246b;色:White;} </style> <table id = "ice"> <tr onclick = "selecttr(); return false;"> <td> 123 </td> <td> 234 </td> <td> abc </td> <td> def </td> </tr> <tr onclick = " <td> abc </td> <td> def </td> </tr> <tr onclick = "selecttr();"> <td> 123 </td> <td> 234 </td> <td> abc </td> <td> def </td> </tr <tr <tr onclick = "> </td> <td> 234 </td> <td> abc </td> <td> def </td> </tr> <tr onclick = "selecttr();"> <td> 123 </td> <td> 234 </td> <td> abc </td> <td> <td> 234 </td> <td> abc </td> <td> def </td> </tr> </table> <スクリプト言語= "javascript"> <! - var currentline = -1; document.onkeydown = function(e){e = window.event || e; switch(e.keycode){ケース38:currentline--; changeItem();壊す;ケース40:CurrentLine ++; changeItem();壊す;デフォルト:break; }} function selecttr(){currentline = window.event.srcelement.parentelement.rowindex; // alert(currentline); changeItem();} //選択項目function function changeitem(){if(document.all)var it = document.getElementbyId( "ice")。子供[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プログラミングに役立つことを願っています。