html 创建新表行时从输入字段中移除值

s2j5cfk0 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(105)

我试图创建一个新角色，但我想要一个文本字段中没有任何值的行。

<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);
    }

在创建行时，我希望所有列的字段文本都为空

Html

来源：https://stackoverflow.com/questions/74780591/remove-values-from-input-fields-when-creating-a-new-table-row

2条答案

按热度按时间

8dtrkrch1#

不要克隆以前的行，而是使用template/string literal创建一个行模板，您可以对tbody元素执行insert before the end操作。
注意：当前表格中没有任何行-只有两个单元格。也不能有多个单元格具有相同的id。id在文档中应该是唯一的。如果必须单独标识单元格，应该使用data attribute。

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>

赞(0）回复(0）举报 2022-12-16

7kqas0il2#

在函数中添加以下行。

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

最终函数如下所示。

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 = '';
         })
                   
  }

赞(0）回复(0）举报 2022-12-16

我来回答

html 创建新表行时从输入字段中移除值

2条答案

相关问题

热门标签

最新问答