Question

我有一张桌子。当我关注最后一行元素时，我想复制表的最后一行并将其附加在最后位置。这可以按照我的代码来完成。

现在，这一新行成为我的最后一行。此后，我无法在单击其元素时生成行。实际上，它会在单击上一行（上一个是最后一个）时生成一行。

我该如何实现？

$('.ankita').focus(function(){  

  var $tr    = $(this).closest('.trbar');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);

$(this).removeClass("ankita");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id='tbl'>
    <tbody>
        <tr>
            <td>
                <p>Cell1</p>
            </td>
            <td>
                <p>Cell2</p>
            </td>
        </tr>
        <tr class="trbar">
            <td>
                <p>Cell3</p>
            </td>
            <td>
                <input id="" class="ankita" type="text" />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

您只需要创建一个委托事件侦听器，该侦听器将仅对最后一行中的焦点事件做出反应。

$('#tbl').on('focus', 'tr:last .ankita', function(){  

  var $tr    = $(this).closest('.trbar');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);

$(this).removeClass("ankita");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id='tbl'>
    <tbody>
        <tr>
            <td>
                <p>Cell1</p>
            </td>
            <td>
                <p>Cell2</p>
            </td>
        </tr>
        <tr class="trbar">
            <td>
                <p>Cell3</p>
            </td>
            <td>
                <input id="" class="ankita" type="text" />
            </td>
        </tr>
    </tbody>
</table>

Answer 2

Ankita，您只是缺少克隆方法的参数

var $ clone = $ tr.clone（true）;

此参数指定还将复制克隆obj中的事件处理程序。

libsqlite3-dev

$('#tbl').on('focus', 'tr:last .ankita', function(){  

  var $tr    = $(this).closest('.trbar');
    var $clone = $tr.clone(true);
    $clone.find(':text').val('');
    $tr.after($clone);

$(this).removeClass("ankita");

});

每次专注于最后一行元素时，都会生成动态行

2 个答案: