JavaScriptでマウスとキーボードを使用した動的テーブルナビゲーション

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

押されたキーのキーコードを特定することによって、どのキーが押されたかを知ることができます。上/下矢印キーを使用して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()を調べると、画面に要素が表示されます。 これはあなたが探しているといいと思います。あなたがより良い答えを見つけたら、私のアプローチを変えることができるようにここに投稿してください。 :)