創建新表行時從輸入字段中刪除值

Question

我正在嘗試創建一個新角色，但我想要一行文本字段中沒有任何值。

<form action="Fruits" method="Post" enctype="multipart/form-data">
    <table id="myTable">
    <c:forEach items="${fruits}" var="val" varStatus="count">
    <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </thead>
    <tbody>
      <td><input type="text" name="name" id="name" value="${val.name}"></td>
      <td><input type="text" name="color" id="color" value="${val.color}"></td>
    </tbody>
    </table>
    <button type="button" class="btn btn-default json-editor-btn-add" onclick="myFunction()">Add</button>
</form>

現在，每當我創建一個新角色時，它都會給我第一行的值並填充文本字段。 有沒有一種方法可以讓我創建一個沒有任何值的行。

 function myFunction(){
        var table = document.getElementById("myTable");
        var first_tr = table.firstElementChild;
        var second_tr = first_tr.nextElementSibling;
        var tr_clone = first_tr.cloneNode(true);   
        var tb_clone = second_tr.cloneNode(true);
        table.append(tr_clone);
        table.append(tb_clone);
    } 

我希望在創建行時所有列都有一個空白字段文本

Answer 1

使用模板/字符串文字創建一個行模板，而不是克隆以前的行，您可以在tbody元素末尾之前插入它。

注意：您當前表格中沒有任何行 - 您只有兩個單元格。 您也不能有多個具有相同 ID 的單元格。 ID 應該在文檔中是唯一的。 如果您必須單獨標識單元格，則應改用數據屬性。

 const rowTmpl = `<tr> <td><input type="text" name="name"></td> <td><input type="text" name="color"></td> </tr>`; const tbody = document.querySelector('tbody'); const button = document.querySelector('button'); button.addEventListener('click', handleClick); function handleClick(e) { tbody.insertAdjacentHTML('beforeend', rowTmpl); }

 <table> <thead> <tr><td>Fruit</td><td>Color</td></tr> </thead> <tbody> <tr> <td> <input type="text" value="Apple" name="name"></td> <td> <input type="text" value="Red" name="color"> </td> </tr> </tbody> </table> <button type="button">Add row</button>

Answer 2

在您的 function 中添加以下行。

 let array_of_input = tb_clone.querySelectorAll('input');
  array_of_input.forEach(cur => {
  cur.value = '';
})

您最終的 function 看起來像這樣。

    function myFunction() {
         var table = document.getElementById("myTable");
         var first_tr = table.firstElementChild;
         var second_tr = first_tr.nextElementSibling;
         var tr_clone = first_tr.cloneNode(true);
         var tb_clone = second_tr.cloneNode(true);
         table.append(tr_clone);
         table.append(tb_clone);
         let array_of_input = tb_clone.querySelectorAll('input');
         array_of_input.forEach(cur => {
               cur.value = '';
         })
                   
  }