จาวาสคริปต์ปุ่มลูกศรขึ้นและลงเพื่อควบคุมการเลือกและการเน้นแถวตาราง

บทความนี้อธิบายวิธีการควบคุมการเลือกและการเน้นแถวตารางโดยคีย์ JavaScript ขึ้นและลง แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:

 <style> tr.highlight {พื้นหลัง:#08246b; สี: สีขาว;} </style> <table id = "น้ำแข็ง"> <tr onclick = "selecttr (); return false;"> <td> 123 </td> <td> 234 </td> <td> abc </td> <td> def </td> <td> abc </td> <td> def </td> </tr> <tr onclick = "selecttr ();"> <td> 123 </td> <td> 234 </td> <td> abc </td> <td> def </td> <td> 234 </td> <td> abc </td> <td> def </td> </tr> <tr onclick = "selecttr ();"> <td> 123 </td> <td> 234 </td> <td> abc </td> <td> 234 </td> <td> abc </td> <td> def </td> </tr> </table> <ภาษาสคริปต์ = "javascript"> <!-var currentline = -1; document.onkeydown = function (e) {e = window.event || E; สวิตช์ (E.KeyCode) {กรณี 38: CurrentLine-; ChangeItem (); หยุดพัก; กรณีที่ 40: CurrentLine ++; ChangeItem (); หยุดพัก; ค่าเริ่มต้น: break; }} ฟังก์ชั่น selecttr () {currentline = window.event.srelement.parentelement.rowindex; // Alert (currentline); ChangeItem ();} // เปลี่ยนฟังก์ชั่นรายการที่เลือก ChangeItem () {ถ้า (document.all) var it = document.getElementById ("ICE") เด็ก [0]; else var it = document.getElementById ("น้ำแข็ง"); สำหรับ (i = 0; i <it.rows.length; i ++) {it.rows [i] .className = ""; } ถ้า (currentline <0) currentline = it.rows.length - 1; ถ้า (currentline == it.rows.length) currentline = 0; it.rows [currentline] .className = "ไฮไลต์"; } //-> </script>

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน