javascript - 箭头键导航不会移动到 TABLE 中附加的 TR

Question

我有这个表结构，它使用箭头键在 td 中的 div 中导航。重新加载页面时，导航工作正常，但是当使用 Jquery append 或 insetAfter 向表格添加更多 tr 时，箭头键导航就不起作用适用于新的 tr td 细胞

您可以看到my live example here

下面是表格的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();
            }
        }
    }           
});

谢谢

Answer 1

您在导航中依赖于 $cells:

i = $cells.index($active)

….find($cells)…

但是，$cells 是变量初始化时表中所有单元格的静态集合。仅查找 $cells 时不会找到新(附加)单元格。

每次追加新行时，您都需要更新 $cells。