通过JavaScript将多个输入追加到表中可以通过以下步骤实现:
<table>
标签来定义表格的结构,例如:<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<!-- 这里是表格的内容 -->
</tbody>
</table>
document.getElementById()
方法来获取输入元素的值,例如:var name = document.getElementById("nameInput").value;
var age = document.getElementById("ageInput").value;
var gender = document.getElementById("genderInput").value;
这里假设输入的姓名、年龄和性别分别对应id为"nameInput"、"ageInput"和"genderInput"的输入元素。
insertRow()
方法创建新的行,然后使用insertCell()
方法创建单元格,并将输入的值赋给单元格,例如: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;
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将多个输入追加到表格中。
领取专属 10元无门槛券
手把手带您无忧上云