在JavaWeb页面中使用js清空table表格中除首行外的内容

原创已于 2022-11-10 21:18:19 修改 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #jquery #html #前端 #javascript

于 2022-03-24 18:43:02 首次发布

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了两种JavaScript代码实现清除表格内容的方法，分别是使用`html()`和`empty()`，并提醒在`table`标签中设置`cellspacing=0`以避免清空后出现空行。示例代码给出了包含`thead`和`tbody`的表格结构，并提供了清除`tbody`内容的JS代码：`$(#tbody1).html()`。

文章目录

- 1、清除的主要代码
- 2、注意事项

1、清除的主要代码

$("#tabID  tr:not(:first)").html("");

或者：

$("#tabID  tr:not(:first)").empty("");

2、注意事项

要注意在table标签处要设置cellspacing=“0”,否则会出现每次清空后出现一些空行的情况

<table id="table1id" cellspacing="0" border="1">

以上是用在table中的，保留表头，现在发现可以直接清楚tbody中所有内容就行
表格html:

<div id="table_div">
    <table id="table1id" cellspacing="0" border="0" style="border-collapse: separate;border-spacing: 0px 12px;" >
        <thead>
        <tr style="width: 100%;height: 60px">
            <th style="height: 35px;width: 10%"></th>
            <th style="height: 35px;width: 30%;"></th>
            <th style="height: 35px;width: 10%;"></th>
            <th style="height: 35px;width: 40%;"></th>
        </tr>
        </thead>
        <tbody id="tbody1">
        </tbody>
    </table>
    <%--    <div class="scroll-bar"></div>--%>
</div>