箭頭鍵導航將不會移動到表中的附加TR

我有這個表格結構，它使用箭頭鍵導航td中的div。當頁面加載重新，但是當更多的tr被添加到使用jQuery append或insetAfter箭頭鍵導航表新trtd細胞箭頭鍵導航將不會移動到表中的附加TR

不起作用

下面是導航工作正常表的HTML結構：

<table id="product_table_body" class="table" border="0" cellpadding="0" cellspacing="0"> 
    <tbody> 
      <tr tabindex="0" id="1"> 
       <td><div class="product_id cells ">1</div></td> 
       <td><div class="product_name cells ">STREET</div></td> 
       <td><div class="product_prices product_cost_price cells ">1.00</div></td> 
       <td><div class="product_warehouse cells ">TAFO-WAREHOUSE</div></td> 
       <td><div class="product_quantity cells ">2</div></td> 
       <td><div class="product_prices product_retail_price cells ">4.00</div></td> 
       <td><div class="product_prices product_whole_sale_price cells ">0.00</div></td> 
       <td><div class="product_prices product_credit_price cells ">0.00</div></td> 
      </tr> 
     </tbody> 
</table>

的Jquery

var o = { 
    38: 'up', 
    40: 'bottom', 
    37: 'prev', 
    39: 'next' 
} 
var $cells = $('.cells'); 
var colcount = $("#product_table_body > tbody").find("> tr:first > td").length; 


//$(window).keydown(function (key) {  
$(document).on('keydown', '.product_table_body', function (key) { 
    var direction = o[key.which]; 
    var $active = $('.active'), $editing = $('.editing'), i=$cells.index($active);  

    if(!$active.length && !$editing.length && direction === 'bottom') 
    { 
     key.preventDefault(); 
     $cells.first().addClass('active').focus(); 
    } 
    else 
    { 
     if(direction === 'next') 
     { 
      $active.removeClass('active').parent('td').next('td').find($cells).first().addClass('active').focus(); 

     } 
     else if(direction === 'prev') 
     { 
      //if(!$editing.length) 
      $active.removeClass('active').parent('td').prev('td').find($cells).first().addClass('active').focus(); 
     } 
     else if(direction === 'up' || direction === 'bottom') 
     { 
      key.preventDefault(); 
      var p = direction === 'up' ? (i - colcount) : (i + colcount); 
      if(!$editing.length) 
      { 
       var activeRow = $cells.removeClass('active').eq(p).addClass('active').focus(); 
       var RowID = activeRow.closest('tr').attr('id'); 
       $('.table tbody tr#'+RowID).focus(); 
      } 
     } 
    }   
});

感謝

來源

2014-01-09 user1862764

@abhitalks在將記錄插入到數據庫後，新行將從'Ajax'響應追加。你可能想用你的螢火蟲來檢查它。 thkk – user1862764

你依靠$cells導航：

i = $cells.index($active) 

….find($cells)…

然而，$cells是分別在表時的所有單元格的靜態集合該變量已初始化。僅在尋找$cells時，不會找到新的（附加的）單元格。

每次添加新行時，都需要更新$cells。

來源

2014-01-09 13:32:10 Bergi

如何更新'cells'，我試着調用'var $ cells = $（'。cells'）;'追加行後，但仍然是同樣的問題 – user1862764

取決於你在做什麼。可能你需要省略'var'來創建一個新的局部變量，但是覆蓋你的腳本。 – Bergi

@Bergi ..非常感謝..你的解決方案效果很好 – user1862764

正如Bergi指出的那樣，您需要重置$cells。你可以嘗試做它在你event綁定功能，如：

$(document).on('keydown', '#product_table_body', function (key) { 
    // get all cells 
    var $cells = $('.cells'); 
    var direction = o[key.which]; 
    var $active = $('.active'),$editing = $('.editing'), i=$cells.index($active); 
    : 
    : 
    :

另外，還要注意的＃product_table_body，而不是之前。（期間），因爲它和ID。

來源

2014-01-09 13:47:16

箭頭鍵導航將不會移動到表中的附加TR

回答

相關問題