首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过javascript将多个输入追加到表中

通过JavaScript将多个输入追加到表中可以通过以下步骤实现:

  1. 创建一个HTML表格,可以使用<table>标签来定义表格的结构,例如:
代码语言:txt
复制
<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里是表格的内容 -->
  </tbody>
</table>
  1. 在JavaScript中获取输入的值,可以使用document.getElementById()方法来获取输入元素的值,例如:
代码语言:txt
复制
var name = document.getElementById("nameInput").value;
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;

这里假设输入的姓名、年龄和性别分别对应id为"nameInput"、"ageInput"和"genderInput"的输入元素。

  1. 创建一个新的表格行,并将输入的值追加到表格中,可以使用insertRow()方法创建新的行,然后使用insertCell()方法创建单元格,并将输入的值赋给单元格,例如:
代码语言:txt
复制
var table = document.getElementById("myTable");
var row = table.insertRow(-1); // -1表示在表格最后追加新行

var cell1 = row.insertCell(0);
cell1.innerHTML = name;

var cell2 = row.insertCell(1);
cell2.innerHTML = age;

var cell3 = row.insertCell(2);
cell3.innerHTML = gender;
  1. 可以将上述代码放在一个函数中,并在提交按钮的点击事件中调用该函数,例如:
代码语言:txt
复制
function appendToTable() {
  var name = document.getElementById("nameInput").value;
  var age = document.getElementById("ageInput").value;
  var gender = document.getElementById("genderInput").value;

  var table = document.getElementById("myTable");
  var row = table.insertRow(-1);

  var cell1 = row.insertCell(0);
  cell1.innerHTML = name;

  var cell2 = row.insertCell(1);
  cell2.innerHTML = age;

  var cell3 = row.insertCell(2);
  cell3.innerHTML = gender;
}

document.getElementById("submitButton").addEventListener("click", appendToTable);

这里假设提交按钮的id为"submitButton"。

通过以上步骤,就可以通过JavaScript将多个输入追加到表格中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券