Javascript 如何添加和删除'；表'；在HTML的特定部分？

如何在每次单击按钮时添加

添加新表…

在

开始：在此添加此表

和

结束：在此添加此表

之间添加HTML内容

同时，如果我单击remove按钮，它将从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>

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(', '));
    });
});

添加新表。。。
这是一张新桌子。。。
移开这张桌子
不同内容

我的Javascript:

<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>

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(', '));
    });
});

var html=”“；
html+=''；
html+=''；
html+=“这是一个新表…”；
html+=“删除此表”；
html+=''；
html+=''；
$（函数（）{
$（'tbody'）.sortable（）；
$（'#AddNewTable'）。单击（函数（）{
$（'tbody'）.append（html）；
});
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parents（'tr'）.remove（）；
});
$（'#getValues'）。单击（函数（）{
var值=[]；
$（'input[name=“name”]”）。每个（函数（i，elem）{
value.push（$（elem.val（））；
});
警报（values.join（'，'）；
});
});

根据您发布的内容，页面上没有任何

tbody

元素。因此，每次单击“添加新表…”时，它都会将

html

内容添加到别处。

从您发布的内容中，页面上没有任何

tbody

元素。因此，每次单击“添加新表…”时，它都会将

html

内容添加到任何位置。

使用

.after（）

将表附加到表ID之后

AddNewTable

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

对于

.remove

按钮，将

tr

更改为

表格

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

工作演示

var html=”“；
html+=''；
html+=''；
html+=“这是一个新表…”；
html+=“删除此表”；
html+=''；
html+=''；
$（函数（）{
//$（'tbody'）.sortable（）；
$（'#AddNewTable'）。单击（函数（）{
$（'#AddNewTable'）。在（html）之后；
$（'.row'）。可排序({
项目：“表格”
});
});
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parents（'table'）.remove（）；
});
$（'#getValues'）。单击（函数（）{
var值=[]；
$（'input[name=“name”]”）。每个（函数（i，elem）{
value.push（$（elem.val（））；
});
警报（values.join（'，'）；
});
});
表{border:2px solid#ccc；cursor:move}

添加新表。。。
这是一张新桌子。。。
移开这张桌子
不同内容
使用
.after（）
在表ID
AddNewTable

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

对于
.remove
按钮，将
tr
更改为
表格

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

工作演示


var html=”“；
html+=''；
html+=''；
html+=“这是一个新表…”；
html+=“删除此表”；
html+=''；
html+=''；
$（函数（）{
//$（'tbody'）.sortable（）；
$（'#AddNewTable'）。单击（函数（）{
$（'#AddNewTable'）。在（html）之后；
$（'.row'）。可排序({
项目：“表格”
});
});
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parents（'table'）.remove（）；
});
$（'#getValues'）。单击（函数（）{
var值=[]；
$（'input[name=“name”]”）。每个（函数（i，elem）{
value.push（$（elem.val（））；
});
警报（values.join（'，'）；
});
});
表{border:2px solid#ccc；cursor:move}

添加新表。。。
这是一张新桌子。。。
移开这张桌子
不同内容