Question

我有一些代码允许特定的表重复最后一行：

<script>
    $(document).ready(function() {
        $(".addbutton").click(function() {
            $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
            return false;
        });
    });
</script>

这适用于ID为mytable的我的桌子。 See working JSFiddle here

我想要做的是让代码适用于同一页面上的任何表格。所以我会有多个add按钮 - 当你按add时，它会使壁橱表行重复。

这是我试图猜测的 - 但它不起作用

<script>
    $(document).ready(function() {
        $(".addbutton").click(function() {
            $(this).closest('table tbody>tr:last').clone(true).insertAfter($(this).closest('table tbody>tr:last'));
            return false;
        });
    });
</script>

如何让代码在同一页面上为多个表工作？ JSFiddle of what I currently have that does not work...

Answer 1

根据您的HTML结构，您无法使用closest()，但您需要使用prev()方法，在每个click按钮上使用委派的.addbutton事件：< / p>

$(document).on('click', '.addbutton', function(e) {
    e.preventDefault(); // not really needed..depends on situation 
    var $tr = $(this).prev('table').find('tbody > tr:last');
    $tr.clone(true).insertAfter($tr);
});

DEMO

closest()在DOM层次结构中向上，并且您正在寻找的表元素不存在，但它实际上是“添加”按钮的兄弟。

Answer 2

这会对你有帮助。

$(document).ready(function(){
  $('.btn').click(function(){
    var tr = $(this).prev('table').find('tr:last');
    tr.clone(true).insertAfter(tr);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table">
    <thead>
        <td>Lorem</td>
        <td>Ipsum</td>
    </thead>
        <tr>
            <td>Consequetor</td>
            <td>...</td>
        </tr>
        <tr>
            <td>Cloning</td>
            <td>....</td>
        </tr>
</table>
<button class="btn">Add</button>
<table class="table">
    <thead>
        <td>Lorem</td>
        <td>Ipsum</td>
    </thead>
        <tr>
            <td>Consequetor</td>
            <td>...</td>
        </tr>
        <tr>
            <td>Cloning</td>
            <td>....</td>
        </tr>
</table>
<button class="btn">Add</button>

当前表的重复行

2 个答案:

DEMO