Question

我试图删除所有 tbody 行并放置一个新的设置但是，我的代码不起作用。它删除了它们但我无法设置必须添加新的 tbody 集。我相信我的输出部分不是理想的做法。请帮我一把。

我已经检查了这些，但老实说，很困惑。 - Adding rows to tbody of a table using jquery - jquery add and add

由于

HTML

<table class="table" id="add-new-yarn-table">
    <thead>
         <th>ID</th>
    </thead>

    <tr>
         <td>BELOW</td>
    </tr>

    <tbody class="filter-rows">
         <tr>
             <td>1</td>
         </tr>
    </tbody>
    <tbody class="filter-rows">
         <tr>
             <td>2</td>
         </tr>
    </tbody>
    <tbody class="filter-rows">
         <tr>
             <td>2</td>
         </tr>
    </tbody>
</table>

<span id='refreshTable()'>REMOVE OLD and ADD NEW SET</span>

JQUERY：

$('#refreshTable').click(function(event) {
    $.ajax({
        type    : 'POST',
        url     : 'hello.php',
        data    : {
            id  : '69'
        },
        success:function (data) {
                var output = '';

                $.each(data.data.records, function(index, value) {
                    var id = data.data.records[index]['id'];

                    output = output + '<tbody class="filter-rows">';
                    output = output + '<tr>';
                    output = output + '<td>' + id + '</td>';
                    output = output + '</tr>';
                    output = output + '</tbody>';
                });

                $('.filter-rows').remove();
                //ADD NEW ROWS SOMEWHRE HERE MAYBE
        }
    });
});

Answer 1

您根本不必删除<tbody>，您只需使用empty()和append()新行清除它，如下所示：

$('#refreshTable').click(function(event) {
$.ajax({
    type    : 'POST',
    url     : 'hello.php',
    data    : {
        id  : '69'
    },
    success:function (data) {
            var output = '';

            $.each(data.data.records, function(index, value) {
                var id = data.data.records[index]['id'];

                output +=  '<tr>';
                output +=  '<td>' + id + '</td>';
                output +=  '</tr>';
            });

            $('.filter-rows').empty().append(output);
    }
 });
});

如果您实际上必须用新的<tbody>替换现有的$('.filter-rows').replaceWith(output);，您可以在原始代码中使用replaceWith()，如下所示：

{{1}}

Answer 2

只需在thead：

之后添加它们即可

$("#add-new-yarn-table thead").after(output);

Answer 3

试试这个

将输出声明为

var output = '<thead> <th>ID</th> </thead> <tr> <td>BELOW</td> </tr> ';

然后有相同的$ .each部分。

然后将tableHTst的innerHTML设置为变量输出。

删除当前集后添加新的tbody集

3 个答案: