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

在我的HTML页面中，表格中有一张表。表的第一行是列的标签，其余行包含输入文本字段。使用JavaScript在表格中添加新行时重置输入字段

在表格下方有一个按钮，它操作一个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函数。

我需要添加到脚本中，以便在没有输入字段中的文本的情况下进行复制？

来源

2017-08-29 Ido Naveh

表id是'地址'，并且您正在传递'branches'作为函数参数。不能得到那... –

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

您正在获取包含值在内的输入文本字段的新行。我对吗？？？ –

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

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

这样你就可以控制进入新细胞的内容。

来源

2017-08-29 11:14:37 Lanrex

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

回答

相关问题