javascript - 如何在 HTML 的特定部分添加和删除 'table'？

Question

如何在每次点击添加新表...按钮时添加在START:在此处添加此表和之间添加HTML内容>END:在此添加此表。

同时，如果我单击删除按钮，它应该从 HTML 中删除该表。不幸的是它不起作用。

我的 HTML:

<div class="col">
    <div class="row">

      <table class="table table-bordered">
        <a class="btn" id="AddNewTable" >Add NEW table...</a>
      </table>

    <!-- START: add here this table -->

      <table>
        <tr>
            <th>This is a new table...</th>
            <th><button class="remove">Remove this table</button></th>
        </tr>
      </table>

    <!-- END: add here this table -->

      <table class="table table-bordered">
        <a class="btn">Different Content</a>
      </table>

    </div>
</div>

我的 JavaScript:

var html = "";

html += '<table>';
html += '<tr>';
html += '<th>This is a new table...</th>';
html += '<td><button class="remove">Remove this table</button></td>';
html += '</tr>';
html += '</table>';

$(function() {
    $('tbody').sortable();

    $('#AddNewTable').click(function(){
        $('tbody').append(html);
    });

    $(document).on('click', '.remove', function() {
        $(this).parents('tr').remove();
    });

    $('#getValues').click(function(){
        var values = [];
        $('input[name="name"]').each(function(i, elem){
            values.push($(elem).val());
        });
        alert(values.join(', '));
    });
});

Answer 1

根据您发布的内容，页面上没有任何 tbody 元素。因此，每次您单击添加新表...时，它都会将html内容添加到任何地方。