JavaScript 方向鍵切換表格tr行高亮效果

admin發表於2019-01-09
JavaScript

本章節分享一段程式碼例項，它實現使用鍵盤上下方向鍵切換tr行，且當前tr行高亮。

此效果具有很大的實用性，能夠有效的提高行與行之間的辨識度。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
tr.highlight{
 background:#08246B;
 color:white;
}
#ice tr td{text-align:center}
</style>
<script type="text/javascript">
var currentLine = -1; 
document.onkeydown=function(ev){
  var ev=window.event||ev; 
  switch(ev.keyCode){ 
    case 38: 
      currentLine--; 
      changeItem(); 
      break; 
    case 40: 
      currentLine++; 
      changeItem(); 
      break; 
    default:
      break; 
  } 
} 
function selectTR(ev){
  var target=ev.target||ev.srcElement;
  currentLine=target.parentNode.rowIndex;
  changeItem();
}
//改變選擇專案 
function changeItem(){ 
  var it = document.getElementById("ice");
  for(var index=0;index<it.rows.length;index++){ 
    it.rows[index].className = ""; 
  } 
  if(currentLine < 0){
    currentLine = it.rows.length - 1; 
  }  
  if(currentLine == it.rows.length){
    currentLine = 0; 
  }
  it.rows[currentLine].className = "highlight"; 
} 
window.onload=function(){
  var trs=document.getElementsByTagName("tr");
  for(var index=0;index<trs.length;index++){
    trs[index].onclick=function(ev){
      var ev=ev||window.event;
      selectTR(ev);
    }
  }
}
</script>
</head>
<body>
<table border="1" width="70%" id="ice">
 <tr>
  <td>螞蟻部落一</td>
  <td>div教程</td>
  <td>css教程</td>
  <td>json教程</td>
 </tr>
 <tr>
  <td>螞蟻部落二</td>
  <td>div教程</td>
  <td>css教程</td>
  <td>json教程</td>
 </tr>
 <tr>
  <td>螞蟻部落三</td>
  <td>div教程</td>
  <td>css教程</td>
  <td>json教程</td>
 </tr>
 <tr>
  <td>螞蟻部落四</td>
  <td>div教程</td>
  <td>css教程</td>
  <td>json教程</td>
 </tr>
 <tr>
  <td>螞蟻部落五</td>
  <td>div教程</td>
  <td>css教程</td>
  <td>json教程</td>
 </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var currentLine = -1，宣告一個變數並賦初值為-1，它用來標識當前tr行的索引。

（2）.document.onkeydown=function(ev){}，為文件註冊onkeydown事件處理函式，ev是事件物件。

（3）.var ev=window.event||ev，實現相容所有瀏覽器的事件物件。

（4）.switch(ev.keyCode)，通過switch語句進行按鍵碼的區分以進行不同的操作。

（5）.case 38: 

  currentLine--; 

  changeItem(); 

  break; 

如果是按的向上的方向鍵，那麼currentLine值就減一，然後呼叫changeItem()方法，最後跳出此語句。

（6）.case 40: 

  currentLine++; 

  changeItem(); 

  break;

如果按的是向下的方向鍵，那麼currentLine值就加一，然後呼叫changeItem()方法，最後跳出此語句。

（7）.function selectTR(ev){},此方法可以實現獲取當前點選tr行，並呼叫changeItem()方法。

（8）.var target=ev.target||ev.srcElement，獲取事件源物件。

（9）.currentLine=target.parentNode.rowIndex，獲取當前行的索引值。

（10）.changeItem()，此函式可以將當前行設定為高亮效果。

（11）.var it = document.getElementById("ice")，獲取table物件。

（12）.for(var index=0;index<it.rows.length;index++){

   it.rows[index].className = ""; 

}，遍歷每一個行，將class屬性值設定為空，也就是將背景色還原。

（13）.if(currentLine < 0){

    currentLine = it.rows.length - 1;

  },如果currentLine小於零，那麼將此值設定為table的行的最大索引，也就是最後一個行的索引。

（14）.if(currentLine == it.rows.length){

  currentLine = 0; 

}，如果currentLine值等於it.rows.length,也就是currentLine值大於最大tr行索引，就會將此值設定為0。

（15）.it.rows[currentLine].className = "highlight"，為當前行新增名為highlight樣式類。

（16）.window.onload=function(){}，當文件完全載入完畢再去執行函式中的程式碼。

（17）.var trs=document.getElementsByTagName("tr")，獲取tr元素集合。

（18）.for(var index=0;index<trs.length;index++){

  trs[index].onclick=function(ev){

    var ev=ev||window.event;

    selectTR(ev);

  }

}，批量為tr元素註冊onclick事件處理函式。

二.相關閱讀:

（1）.var ev=window.event||ev參閱var ev=window.event||ev的作用一章節。

（2）.switch語句參閱JavaScript  switch一章節。

（3）.target屬性參閱JavaScript event.target一章節。

（4）.parentNode()參閱JavaScript parentNode一章節。

（5）.rowIndex屬性參閱JavaScript rowIndex一章節。

（6）.className參閱JavaScript className一章節。

相關文章