Question

我正在使用動態表創建，並且我想在表中填充列表時使用鍵盤和鼠標創建表導航。以下是在表格中打印動態列表的代碼，現在我要導航它。

function validateInputs(dealerresult) { 
    alert("Hello"); 
    var params = $("#getDealerdetails").serialize(); 
    var url = '<fmt:message key="app.contextPath"/>/channels/getDealerListbyCriteria.htm?channel=1'; 
    $.post(url, params, function (data) { 
     //alert("Hello"); 
     //alert(data); 
     var dealerData = data; 
     var JSONObj = JSON.parse(dealerData).result; 

     var table = document.getElementById(dealerresult); 
     var rowCount = table.rows.length; 


     alert(rowCount); 

     //var row = table.insertRow(rowCount); 
     // var cell; = row.insertCell(0); 
     // cell1.innerHTML="Dealer" 
     // var cell2 = row.insertCell(1);  
     // cell2.innerHTML = 'Town' 

     for (i = 0; i < JSONObj.length; i++) { 
      var row = table.insertRow(rowCount); 
      //row.style.className = 'navigateable'; 
      row.insertCell(0).innerHTML = JSONObj[i].bpName; 
      row.insertCell(1).innerHTML = JSONObj[i].bpTown; 
      rowCount++; 

      //alert(JSONObj[i].bpName); 
     } 


    }); 
    document.getElementById('popupa').style.display = 'block'; 
} 

Answer 1

您可以通過識別所按鍵的keyCode來找到哪個鍵被按下。看看下面的代碼片段，我正在使用上/下箭頭鍵瀏覽jqgrid。

 $(document).keypress(function(e){ 
      e.preventDefault(); // so that the default event for the key, which is to 
           // scroll is disabled. 
      if(e.keyCode == 40) { // down arrow key 
       // write code to get the row or highlight it using jquery and css     
      } 
      if(e.keyCode == 38) { // up arrow key 
       // write code to get the row or highlight it using jquery css         
      } 
     }); 

此外，如果你打算只突出顯示行並將其顯示在屏幕上，那麼你可以編寫適當的代碼來做到這一點。假設該行不可見，然後查看可以在屏幕上顯示元素的scrollIntoView()。 希望這是你正在尋找。如果您找到更好的答案，請在此發佈，以便我可以改變我的方法。 :)