Question

我有这个表结构，它使用箭头键来浏览td中的div。重新加载页面时导航工作正常，但是当使用Jquery tr或append向表添加更多insetAfter时，箭头键导航对新tr不起作用td个单元格

以下是表格的 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。

Answer 2

正如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。

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

2 个答案: