使用 JavaScript 向表中添加新行时重置输入字段

Posted 2023-03-05

【中文标题】使用 JavaScript 向表中添加新行时重置输入字段

【英文标题】：Reset input fields when adding a new row to a table using JavaScript

【发布时间】：2018-02-06 18:56:13

【问题描述】：

在我的 html 页面上，表单中有一个表格。表格的第一行是列的标签，其余行包含输入文本字段。

在表格下方，有一个按钮操作一个 javascript 函数，该函数复制表格末尾的第一行。

问题是文本也从第一行字段复制到新添加的行字段。相反，我想从新添加的行字段中清除文本。我该怎么做？

这是我的代码：

<form action="update.php" method="post" enctype="multipart/form-data">
<table id="addresses" class="form" border="1">
<tbody>
  <tr>
    <p>
      <th>

      </th>
      <th>
        <label for='UPDATE_NAME'>Name</label>
      </th>
      <th>
        <label for='UPDATE_NUMBER'>Phone Number (With Country Code)</label>
      </th>
      <th>
        <label>Address (House No., Street, City, State, ZIP Code, P.O. Box)</label>
      </th>
    </p>
  </tr>
  <?php
                            for ($i = 0; $i < count($addresses); $i++) 
                                $id = str_pad($i, 2, '0', STR_PAD_LEFT);
                                echo "<tr>";
                                echo "<p>";
                                echo "<td>";
                                echo "<input type='checkbox' name='chk[]' />";
                                echo "</td>";
                                echo "<td>";
                                echo "<input type='text' name='UPDATE_NAME[]' value='".$names[$id]['S']."' />";
                                echo "</td>";
                                echo "<td>";
                                echo "<input type='tel' name='UPDATE_NUMBER[]' value='".$numbers[$id]['S']."' />";
                                echo "</td>";
                                echo "<td>";
                                echo "<input type='text' name='UPDATE_ADDRESS[]' value='".$addresses[$id]['S']."' />";
                                echo "</td>";
                                echo "</p>";
                                echo "</tr>";
                            
                        ?>
</tbody>
</table>
<p>
    <input type="button" value="Add Address" onClick="addRow('addresses')" />
</p>
<script>
function addRow(tableID) 
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if (rowCount < 10) 
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) 
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    
    document.getElementById("APP_UPDATE_NAME[" + rowCount + "]").reset();
   else 
    alert("Maximum Branches Number is 10");
  

</script>
<input type="submit" class="flat-button form" name="SUBMIT" value="Update Addresses" />
</form>

在上面的代码中，您可以看到带有标签的第一行，然后是一个 PHP 循环，它从 PHP 数组中添加信息。在表格之后，您可以看到向表格添加一行的 JavaScript 函数。

我需要在脚本中添加什么以便在没有输入字段中的文本的情况下复制它？

【问题讨论】：

表 ID 是 addresses 并且您将 branches 作为函数参数传递。无法理解...

@YashParekh 当我将代码复制到问题中时，这是我的错误。我更改了问题中的一些值，但我也忘记调整了。

您将获得一个新行，其中包含包含值的输入文本字段。我说的对吗？

@YashParekh 是的。这就是发生的情况，我想获取没有值的输入文本字段。

【参考方案1】：

您可以手动设置新行的值，而不是复制它。像这样：

newcell.innerHTML = "<input type='...' name='...' value='...' />";

这样您可以控制进入新单元的内容。