html页面如何通过按钮在表格中添加一行中数据用input框输入 并且传参给后台

您可以使用JavaScript来实现在表格中添加一行数据并将输入框中的值传递给后台。以下是一个简单的示例代码：

首先，在HTML代码中创建一个包含表格和一个按钮的容器：

<div id="container">
  <table id="myTable">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <!-- 其他行... -->
  </table>
  <input type="text" id="nameInput" placeholder="姓名">
  <input type="text" id="ageInput" placeholder="年龄">
  <button onclick="addRow()">添加行</button>
</div>

然后，在JavaScript中定义一个函数addRow()来处理按钮点击事件，并将输入框中的值添加到表格中的新行中：

function addRow() {
  // 获取输入框的值
  var name = document.getElementById("nameInput").value;
  var age = document.getElementById("ageInput").value;

  // 创建新行和单元格
  var table = document.getElementById("myTable");
  var row = table.insertRow(table.rows.length);
  var nameCell = row.insertCell(0);
  var ageCell = row.insertCell(1);

  // 设置新行的值
  nameCell.innerHTML = name;
  ageCell.innerHTML = age;

  // 发送数据到后台，这里使用了fetch API发送POST请求
  fetch("your_backend_url", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ name: name, age: age }),
  })
    .then((response) => response.json())
    .then((data) => {
      // 处理后台返回的响应数据
      console.log(data);
    })
    .catch((error) => {
      console.error("Error:", error);
    });
}

请注意，上述代码中的"your_backend_url"应替换为您自己的后端接口地址。

这样，当用户在输入框中输入姓名和年龄，并点击添加行按钮时，将会在表格中添加一行，并将输入的数据通过POST请求发送给后台。