【问题标题】:clear table jquery清除表jquery
【发布时间】:2022-01-18 22:17:02
【问题描述】:

我有一个 HTML 表格,里面有很多行。

如何删除表格中的所有行?

【问题讨论】:

    标签: jquery html-table


    【解决方案1】:

    使用.remove()

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

    如果您想保留数据以供将来使用,即使在删除后也可以使用 .detach()

    $("#yourtableid tr").detach();
    

    如果行是表的子项,那么您可以使用子选择器而不是后代选择器,例如

    $("#yourtableid > tr").remove();
    

    【讨论】:

    • 注意最后一个:大多数浏览器在 tr 元素周围添加一个隐含的 tbody 元素。
    【解决方案2】:

    如果要清除数据但保留标题:

    $('#myTableId tbody').empty();
    

    表格必须以这种方式格式化:

    <table id="myTableId">
        <thead>
            <tr>
                <th>header1</th><th>header2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data1</td><td>data2</td>
            </tr>
        </tbody>
    </table>
    

    【讨论】:

    • 这是可行的,但这会删除 'tbody' 本身及其内部的所有 'tr'。
    • 你是对的,@HakamFostok。我已经编辑了我的答案,改为使用 empty()
    【解决方案3】:

    比单独删除一个要快一些:

    $('#myTable').empty()
    

    从技术上讲,这也会删除 theadtfoottbody 元素。

    【讨论】:

      【解决方案4】:

      我需要这个:

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

      它会删除除标题之外的所有行。

      【讨论】:

        【解决方案5】:

        核选项:

        $("#yourtableid").html("");
        

        销毁#yourtableid 内的所有内容。小心你的选择器,因为它会破坏你传递的选择器中的任何 html!

        【讨论】:

        • +1 表示核 :)。但应该明白这不是“最好”的风格:)我一般不会推荐它
        • 哈哈。同意。我过去曾使用这种特殊方法来提高速度和解决困难情况。它在 JQuery 应用程序领域有一些有效的用途。
        【解决方案6】:
        $("#employeeTable td").parent().remove();
        

        这将删除所有以td 为子级的tr。即除了标题之外的所有行都将被删除。

        【讨论】:

        • 这是唯一适合我的。删除除标题以外的所有内容...
        【解决方案7】:

        这将删除属于正文的所有行,从而保持标题和正文完整:

        $("#tableLoanInfos tbody tr").remove();
        

        【讨论】:

          【解决方案8】:
          <table id="myTable" class="table" cellspacing="0" width="100%">
              <thead>
                  <tr>
                      <th>Header 1</th>
                      <th>Header 2</th>
                      <th>Header 3</th>
                  </tr>
              </thead>
              <tbody id="tblBody">
          
              </tbody>
          </table>
          

          然后删除:

          $("#tblBody").empty();
          

          【讨论】:

            【解决方案9】:
              $('#myTable > tr').remove();
            

            【讨论】:

              【解决方案10】:

              有一个这样的表格(带有标题和正文)

              <table id="myTableId">
                  <thead>
                  </thead>
                  <tbody>
                 </tbody>
              </table>
              

              删除 #tableId 中每个具有名为 tbody 的父级的 tr

              $('#tableId tbody > tr').remove();
              

              如果你想添加到你的表中,反过来

              $('#tableId tbody').append("<tr><td></td>....</tr>");
              

              【讨论】:

                猜你喜欢
                • 2010-12-24
                • 2011-12-09
                • 2018-03-28
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2013-12-03
                • 2011-09-15
                相关资源
                最近更新 更多