将表单元格添加到仅克隆表中 [英] Adding a table cell into only cloned table

问题描述

我想在克隆表中添加一个新的 TD ，因此它将仅存在于克隆表中而不存在于原始表中.原因是，我不希望用户删除原始表，否则将无法克隆任何内容:)

I want to add a new TD into cloned table so it will only exist in cloned table not in original one. The reason is, I don't want users to remove original table otherwise there won't be anything to be cloned :)

当前是这样的:

<table>
    <tr>
        <td>
            <div class="sizes">size</div>
            <div class="sizes">length</div>
        </td>
    </tr>
</table>

克隆后应该是这样的:

<table>
    <tr>
        <td>
            <div class="sizes">size</div>
            <div class="sizes">length</div>
        </td>
        <td class="remove-table"><span>REMOVE</span></td>
    </tr>
</table>

JS:

$(document).ready(function () {
   $('.add-another-table').click(function (event) {
      event.preventDefault();
      var clonedTable = $(this).prev('table').clone();
      $(this).before(clonedTable);
   });
   $('div').on('click', '.remove-table', function (event) {
      event.preventDefault();
      $(this).closest('table').remove();
   });
});

http://jsfiddle.net/b3JdB/

推荐答案

尝试在clone上的.append()所需元素，

$(document).ready(function () {
    $('.add-another-table').click(function (event) {
        event.preventDefault();
        var clonedTable = $(this).prev('table').clone();
        $(this).before(clonedTable.find('.remove-table').remove().end().find('tr').append('<td class="remove-table"><span>REMOVE</span></td>').end());
    });

    $('div').on('click', '.remove-table', function (event) {
        event.preventDefault();
        $(this).closest('table').remove();
    });
});

这篇关于将表单元格添加到仅克隆表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！