Question

如何使用jQuery从动态表中删除所有行，如下所示：

HTML CODE：

<table id="myTable" border="1">
    <th style="width:100px;">Barangays</th>
    <th style="width:140px;">Lat</th>
    <th style="width:140px;">long</th>
    <tbody>
        <tr></tr>
    </tbody>
</table>

我有这个代码将<td>附加到表格中：

JS CODE：

 $('tr.' + this.id).html('<td>' + this.title + '</td><td>' + this.getPosition().lat().toFixed(6) + '</td><td>' + this.getPosition().lng().toFixed(6) + '</td>');

现在我需要一个click函数来删除所有添加的行，但保留表中的第一行，就像之前一样。

Answer 1

首先，HTML无效，应该是tr元素的子元素。

要删除行，请尝试

$('#myTable tr').slice(1).remove()

将您的HTML更改为

<table id="myTable" border="1">
    <thead>
        <tr>
            <th style="width:100px;">Barangays</th>
            <th style="width:140px;">Lat</th>
            <th style="width:140px;">long</th>
        </tr>
    </thead>
    <tbody>
        <tr></tr>
    </tbody>
</table>

然后

$('#myTable tbody tr').remove()

Answer 2

使用此：

$(document).ready(function() {
       $("#myTable").find("tr:gt(0)").remove();
    });

DEMO

或

if ($("table tr").length != 1) { $("table tr:last").remove(); }

Answer 3

试试这个

$('#myTable tr').not(':first').remove();

Answer 4

您也可以使用jquery的eq

var first = $('#myTable tbody tr').eq(0); // Take the first row
$('#myTable tbody tr').remove(); //remove all rows
$('#myTable tbody').html(first); //put first row again

删除动态表但第一行的所有行

4 个答案:

Demo