logo标签列表

如何在JavaScript中清空表格？

javascripthtml
3

我无法删除表格中的行内容，但如果我也想要删除这些行怎么办？

我的JavaScript代码：（我希望所有的行都消失，除了第一行）

function deleteAll() {
        for ( var i = 0; i <= table.rows.length; i++){
            table.rows[i].cells[0].innerHTML = "";
            table.rows[i].cells[1].innerHTML = "";
            table.rows[i].cells[2].innerHTML = "";            
        }     
        
    }

我的HTML表格：

<body>
    <div class="container">
        <div class="tab tab-1">
            <table id="table" border="1">
                <th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Age</th>
                </th>
                <tr>
                    <td>Frank</td>
                    <td>Nenjim</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>Alex</td>
                    <td>Ferreira</td>
                    <td>23</td>
                </tr>


            </table>      

        </div>
        <div class="tab tab-2">
            First Name :<input type="text" name="fname" id="fname">
            Last Name :<input type="text" name="lname" id="lname">
            Age :<input type="number" name="age" id="age">

            <button onclick="deleteAll()">Delete All</button>

        </div>

    </div>
    <script src="tableEdit.js"></script>
</body>

因此，上述Javascript代码并不能满足我的需求，因为我只想要第一行保留，不想要空白行。

2
while( table.rows.length > 1) table.rows[1].remove(); - Niet the Dark Absol
3
你的HTML表格无效，顺便提一句：TH不是行。 - evolutionxbox
3个回答
2
您可以使用jQuery的remove()函数，如此示例所述，来删除除第一行标题行以外的所有行：
$('#table tr:not(:first)').remove();

您可能希望按照这篇文章中提到的方法，仅删除正文部分（在<tbody>内部的行）。
$('#table > tbody > tr').remove();
0
for(var i = 1;i<table.rows.length;){
            table.deleteRow(i);
        }
4
请勿仅以代码形式回答问题，您需要解释代码的作用以及如何解决问题。带有解释的答案通常更具高质量，并更有可能获得赞同。 - Mark Rotteveel
-2

如果您只想删除数据行，请使用以下方法

$("#table tr").remove();

如果您想清空带有表头的表格，请使用以下命令

$("#table").empty();
如果您使用<tr>分配了标题行，则这两个命令都将消除标题。 - Elias
表头行应该有 <th></th> 标签，或者它应该有 <table><thead><tr></tr></thead><tbody><tr></tr></tbody><table>，你可以使用 $("#table tbody tr").remove(); 来删除数据行。 - Anil Panjabi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接