我想使用 javascirpt 從表中洗掉每一行 這是我嘗試使用 .remove 函式的代碼，但它沒有成功......

HTML 表格代碼

<div class="card-body">
                                            <table class="table text-center">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">#</th>
                                                        <th scope="col">Name</th>
                                                        <th scope="col">Total</th>
                                                        <th scope="col">Reaming Paid</th>
                                                        <th scope="col">To Be Paid</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="table_body">
                                                   <tr>
                                                 <td>2</td>
                                                 <td> mess fee </td>
                                                 <td> 2500 </td>
                                                 <td>0 </td>
                                                 <td>  <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
                                                 </tr>

                                                </tbody>
                                            </table>
                                        </div>

JAVASCRIPT代碼

 if(tablebody.children.length > 0)
            {

                  for (let i = 0; i < tablebody.children.length; i  )
                        {
                          tablebody.children[i].remove()
                       } 
            }

uj5u.com熱心網友回復：

解釋

這將獲得表格主體的所有 tr （行）。然后它將洗掉（洗掉）它找到的任何內容

解決方案

let trs = document.querySelectorAll('#table_body tr');

trs.forEach((tr)=>{
        tr.remove();
});

uj5u.com熱心網友回復：

如果你想洗掉所有 tr 也許你應該做這樣的事情

document.getElementById('table_body').innerHTML = ''

<div class="card-body">
  <table class="table text-center">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Total</th>
        <th scope="col">Reaming Paid</th>
        <th scope="col">To Be Paid</th>
      </tr>
    </thead>
    <tbody id="table_body">
      <tr>
        <td>2</td>
        <td> mess fee </td>
        <td> 2500 </td>
        <td>0 </td>
        <td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
      </tr>

    </tbody>
  </table>
</div>

uj5u.com熱心網友回復：

查找所有表行，使用 遍歷它們，for of然后使用 洗掉每一行Element.remove()。

const rows = document.querySelectorAll("#table_body tr");

for (const row of rows) {
  row.remove();
}

<div class="card-body">
  <table class="table text-center">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Total</th>
        <th scope="col">Reaming Paid</th>
        <th scope="col">To Be Paid</th>
      </tr>
    </thead>
    <tbody id="table_body">
      <tr>
        <td>2</td>
        <td>mess fee</td>
        <td>2500</td>
        <td>0</td>
        <td>
          <input
            type="number"
            id="remaing_amount"
            name="remaing_amount[]"
            class="form-control"
            placeholder="Enter Paid Amount"
          />
        </td>
      </tr>
    </tbody>
  </table>
</div>

uj5u.com熱心網友回復：

怎么樣：

    function deleteRow(rowid)  
    {   
        var row = document.getElementById(rowid);
        row.parentNode.removeChild(row);
    }

而且，如果失敗了，這應該真的有效：

    function deleteRow(rowid)  
    {   
        var row = document.getElementById(rowid);
        var table = row.parentNode;
        while ( table && table.tagName != 'TABLE' )
            table = table.parentNode;
        if ( !table )
            return;
        table.deleteRow(row.rowIndex);
    }

或者試試這個

<button onclick="myFunction()">delete </button>
<script>
function myFunction() {
  document.getElementById("table_body").deleteRow(0);
}
</script>

uj5u.com熱心網友回復：

試試這個方法...

const tBody = document.querySelector('#table_body');
const tRow =document.querySelector('#table_body tr')
if (tBody.contains(tRow) {
 tRow.remove();
}

標籤：javascript html

上一篇：在javascript中查找最近的id

下一篇：按下按鈕時HTML文本未更改