如何添加一个按钮来清除所有表格行？答案

【问题标题】：How to add a button to clear All table rows?如何添加一个按钮来清除所有表格行？
【发布时间】：2020-11-29 18:13:21
【问题描述】：

如何添加一个按钮来清除所有表格行？我想将此按钮添加到我的表单中，这是我的代码的fiddle。我尝试了很多方法，但都没有奏效。

function render(){
     for (let i = 0; i < allMovie.length; i++) {
        var tr = document.createElement('tr');
        tr.setAttribute("id", "mainTR");
        table.appendChild(tr);
    
        var td1 = document.createElement('td');
        td1.textContent = allMovie[i].MovieName11;
        td1.setAttribute("class", "td1");
        tr.appendChild(td1);
        
        var td2 = document.createElement('td');
        td2.textContent = allMovie[i].selectPlatform11;
        td2.setAttribute("class", "td2");
        tr.appendChild(td2);
    
        var td3 = document.createElement('td');
        td3.textContent = allMovie[i].randomRate;
        td3.setAttribute("class", "td3");
        tr.appendChild(td3);
    
        var td4 = document.createElement('td');
        td4.textContent = allMovie[i].monthlyPay11;
        td4.setAttribute("class", "td4");
        tr.appendChild(td4);
    
        var td5 = document.createElement('td');
        td5.setAttribute("id", "td5");
        td5.innerHTML = `<button onclick=remove()> X </button>`
        tr.appendChild(td5);
    }
    }
    
    function remove() { /line10
      var removeOBJ = document.getElementById("mainTR");
      return removeOBJ.remove();
    }

【问题讨论】：

您想要一个清除所有行的按钮，还是希望每行都有一个“清除”按钮，只清除自己的行？
不，我想要一个清除所有行的按钮。
就像在您的小提琴中一样，您只需将按钮添加到您的表单中，然后在按下侦听器时调用您的函数 clearTable()

标签： javascript arrays function for-loop dom

【解决方案1】：

在删除它们之前，您实际上不需要为所有行分配 id，您主要需要对包含 table/tbody 元素的引用。要删除所有行（即表主体的所有tr 子级），请使用tableElement.removeChild() 函数。像这样：

function clearTable() {
    const parent = document.getElementById("tbodyElementId");

    while(parent.firstChild)
    {
        parent.removeChild(parent.firstChild);
    }
}

假设您有这样的结构：

<table>
  <thead>...</thead>
  <tbody id="tbodyElementId">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

请注意，此方法不会删除表头中的任何行 (<thead>)

【讨论】：

【解决方案2】：

首先，你的表格结构不正确，tr（表格行）应该在tbody中，当前tbody内容应该在thead中。

用以下结构替换您的代码：

     <table id="table">
      <thead>
        <tr>
            <th>Movie Name</th>
            <th>Favourite streaming platform</th>
            <th>Movie Rate</th>
            <th>Your pay monthly on Streaming platforms</th>
            <th>Remove</th>
        </tr> 
      </thead>
      <tbody>
        <!-- Your data here -->
      </tbody>
    </table>

在渲染函数中，而不是在表中附加数据并且您从上图获得结构，您应该在 tbody 中附加数据表行。这意味着您应该像这样替换表变量的行：

var table = document.querySelector('table > tbody');

现在您可以控制在正确的位置插入数据表行。然后我们就可以去实现删除数据了。

只需新按钮和事件单击，您就可以像这样从 tbody 中删除所有数据：

<input type="button" value="Delete data" id="deleteData" onclick="document.querySelector('table > tbody').innerHtml = '';">

【讨论】：