This article describes the method of controlling the selection and highlighting of table rows by javascript up and down arrow keys. Share it for your reference. The specific implementation method is as follows:
<style>tr.highlight { background:#08246B; color: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="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> <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();}//change the selection item 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>I hope this article will be helpful to everyone's JavaScript programming.