代码之家  ›  专栏  ›  技术社区  ›  Ido Naveh

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

  •  0
  • Ido Naveh  · 技术社区  · 8 年前

    在表下面,有一个按钮,用于操作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函数,该函数向表中添加了一行。

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

    1 回复  |  直到 8 年前
        1
  •  2
  •   Vilapri    8 年前

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

    推荐文章