亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

刪除表中除標題行外的所有行

刪除表中除標題行外的所有行

MMMHUHU 2022-11-03 15:01:25
使用 Javascript(使用 JQuery),我想刪除表中除標題行之外的所有行。這似乎是一件簡單的事情,因為我在 StackOverFlow 上看到了很多關于此的帖子以及提供和接受的許多解決方案。但是,它們似乎都不適合我。請參考我下面的代碼:function delTable() {  console.log("Delete all rows, but the header");  // Option-A  // $('#TableA tbody tr').remove();  // Option-B  // Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header  // $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();  // Option-C  $('#TableA tbody').empty();}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><html><body onLoad="delTable();">  <table id="TableA">    <th>      <tr>        <td>Col A</td>        <td>Col B</td>      </tr>    </th>    <tbody>      <tr>        <td>1</td>        <td>2</td>      </tr>      <tr>        <td>3</td>        <td>4</td>      </tr>    </tbody>  </table></body></html>有誰知道我做錯了什么?謝謝。
查看完整描述

4 回答

?
DIEA

TA貢獻1820條經驗 獲得超2個贊

只需將您的 th 更新為 thead 就可以了,請參見下文:


HTML:


<!DOCTYPE html>

<html>

<head>

    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>


  

</head>

<body onLoad="delTable()">

  <table id="TableA">

    <thead>

      <tr>

        <td>Col A</td>

        <td>Col B</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>1</td>

        <td>2</td>

      </tr>

      <tr>

        <td>3</td>

        <td>4</td>

      </tr>

    </tbody>

  </table>


</body>

</html>

JS:


function delTable() {

  console.log("Delete all rows, but the header");


  // Option-A

  // $('#TableA tbody tr').remove();


  // Option-B

  // Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header

  // $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();


  // Option-C

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


}

工作小提琴: https ://jsfiddle.net/pvfkxdby/1/


查看完整回答
反對 回復 2022-11-03
?
夢里花落0921

TA貢獻1772條經驗 獲得超6個贊

這對我有用。<th>你用而不是分開你的標題,<thead>然后你<td>在你的標題中而不是<th>。


$(document).ready(() => {

  $("#delete").click(() => {

    $("#TableA tbody tr").remove()

  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="TableA">

    <thead>

      <tr>

        <th>Col A</th>

        <th>Col B</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>1</td>

        <td>2</td>

      </tr>

      <tr>

        <td>3</td>

        <td>4</td>

      </tr>

    </tbody>

 </table>

 <button id="delete">delete</button>


查看完整回答
反對 回復 2022-11-03
?
慕少森

TA貢獻2019條經驗 獲得超9個贊

通過在我的 Google Chrome 中檢查您的 HTML,我可以看到行已重新排列,因此即使第一行也在<tbody>標簽內。因此整個表被刪除。您可以簡單地通過將第一行包裝在<thead>標簽中或使用不使用<tbody>標簽的不同方法來解決此問題。



查看完整回答
反對 回復 2022-11-03
?
手掌心

TA貢獻1942條經驗 獲得超3個贊

您需要替換th為thead并使用$('#TableA tbody').find("tr")如下:


function delTable() {

  console.log("Delete all rows, but the header");

  $('#TableA tbody').find("tr").remove();

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<html>


<body onLoad="delTable();">

  <table id="TableA">

    <thead>

      <tr>

        <td>Col A</td>

        <td>Col B</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>1</td>

        <td>2</td>

      </tr>

      <tr>

        <td>3</td>

        <td>4</td>

      </tr>

    </tbody>

  </table>


</body>


</html>


查看完整回答
反對 回復 2022-11-03
  • 4 回答
  • 0 關注
  • 159 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號