按下按钮在表单中动态追加一行

可以使用 JavaScript 来实现在表单中动态追加一行，具体实现方法可以参考以下代码：

HTML 代码：

<form>
  <table id="myTable">
    <tr>
      <td><input type="text" name="name[]" /></td>
      <td><input type="text" name="age[]" /></td>
    </tr>
  </table>
  <button type="button" onclick="addRow()">添加一行</button>
</form>

JavaScript 代码：

function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell();
  var cell2 = row.insertCell(1);
  cell1.innerHTML = '<input type="text" name="name[]" />';
  cell2.innerHTML = '<input type="text" name="age[]" />';
}

这样，每次点击“添加一行”按钮，就会在表格的最后一行添加一行新的输入框。

相关问题

html表格增加一行，从表单获取内容

要在HTML表格中增加一行，并从表单中获取内容，可以使用以下的示例代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>35</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age"><br><br>
  <label for="gender">性别：</label>
  <select id="gender" name="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select><br><br>
  <button type="button" onclick="addRow()">添加行</button>
</form>

<script>
  function addRow() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(); // 插入新行

    var name = document.getElementById("name").value; // 获取姓名输入框的值
    var age = document.getElementById("age").value; // 获取年龄输入框的值
    var gender = document.getElementById("gender").value; // 获取性别下拉框的值

    var cell1 = row.insertCell(0); // 插入新列
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = name; // 设置单元格内容
    cell2.innerHTML = age;
    cell3.innerHTML = gender;
  }
</script>

这个例子中，我们使用了一个表单来获取新行的数据，然后将数据插入到表格中。当用户点击“添加行”按钮时，会调用addRow()函数，该函数首先获取表单中的数据，然后使用insertRow()方法插入一行，再使用insertCell()方法插入三个单元格，并将数据设置为单元格的内容。最后，新行被添加到表格的末尾。

PHP实现单击“添加”按钮增加一行表单项，并将所有内容插入到数据库中

好的，这是 PHP 实现单击“添加”按钮增加一行表单项，并将所有内容插入到数据库中的大致思路：

1. 在 HTML 页面中，使用 JavaScript 或 jQuery 监听“添加”按钮的点击事件；
2. 点击“添加”按钮时，动态添加一行表单项；
3. 点击“提交”按钮时，将表单数据通过 Ajax 发送到后台；
4. 后台接收到数据后，进行数据的插入操作，将数据插入到对应的数据库表中。

以下是具体的实现步骤：

1. HTML 页面中，使用 JavaScript 或 jQuery 监听“添加”按钮的点击事件，并在点击时动态添加一行表单项。例如：

<!-- HTML -->
<table id="form-table">
  <tr>
    <td><input type="text" name="field1"></td>
    <td><input type="text" name="field2"></td>
    <td><button id="add-row">添加</button></td>
  </tr>
</table>

<script>
  // JavaScript
  let formTable = document.querySelector("#form-table");
  let addRowBtn = document.querySelector("#add-row");

  addRowBtn.addEventListener("click", function () {
    let newRow = document.createElement("tr");
    newRow.innerHTML = `
      <td><input type="text" name="field1"></td>
      <td><input type="text" name="field2"></td>
      <td><button class="remove-row">删除</button></td>
    `;
    formTable.appendChild(newRow);
  });

  // 或者使用 jQuery
  $("#add-row").click(function () {
    let newRow = `
      <tr>
        <td><input type="text" name="field1"></td>
        <td><input type="text" name="field2"></td>
        <td><button class="remove-row">删除</button></td>
      </tr>
    `;
    $("#form-table").append(newRow);
  });
</script>

2. 在 HTML 页面中，使用 JavaScript 或 jQuery 监听“删除”按钮的点击事件，并在点击时删除对应的表单项。例如：

<!-- HTML -->
<table id="form-table">
  <tr>
    <td><input type="text" name="field1"></td>
    <td><input type="text" name="field2"></td>
    <td><button class="add-row">添加</button></td>
  </tr>
</table>

<script>
  // JavaScript
  let formTable = document.querySelector("#form-table");

  formTable.addEventListener("click", function (event) {
    if (event.target.classList.contains("remove-row")) {
      event.target.closest("tr").remove();
    }
  });

  // 或者使用 jQuery
  $("#form-table").on("click", ".remove-row", function () {
    $(this).closest("tr").remove();
  });
</script>

3. 在 HTML 页面中，添加一个“提交”按钮，点击时通过 Ajax 将表单数据发送到后台。例如：

<!-- HTML -->
<form id="my-form">
  <table id="form-table">
    <!-- 表单项 -->
  </table>
  <button type="submit">提交</button>
</form>

<script>
  // JavaScript
  let myForm = document.querySelector("#my-form");

  myForm.addEventListener("submit", function (event) {
    event.preventDefault();
    let formData = new FormData(myForm);
    $.ajax({
      type: "POST",
      url: "insert.php",
      data: formData,
      contentType: false,
      processData: false,
      success: function (response) {
        console.log(response);
      },
      error: function (xhr, status, error) {
        console.log(error);
      }
    });
  });

  // 或者使用 jQuery
  $("#my-form").submit(function (event) {
    event.preventDefault();
    let formData = new FormData(this);
    $.ajax({
      type: "POST",
      url: "insert.php",
      data: formData,
      contentType: false,
      processData: false,
      success: function (response) {
        console.log(response);
      },
      error: function (xhr, status, error) {
        console.log(error);
      }
    });
  });
</script>

4. 在 PHP 文件 insert.php 中，接收表单数据并将数据插入到数据库中。例如：

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

// 接收表单数据
$field1 = $_POST["field1"];
$field2 = $_POST["field2"];

// 插入数据到数据库
$sql = "INSERT INTO myTable (field1, field2) VALUES ('$field1', '$field2')";
if ($conn->query($sql) === TRUE) {
  echo "数据插入成功";
} else {
  echo "数据插入失败: " . $conn->error;
}

// 关闭数据库连接
$conn->close();
?>

以上就是 PHP 实现单击“添加”按钮增加一行表单项，并将所有内容插入到数据库中的大致思路和实现步骤。