点击按钮将表单内容传递给表格显示JS方法
时间: 2024-04-16 20:28:25 浏览: 16
您可以使用以下代码将表单内容传递给表格显示的 JavaScript 方法:
HTML 部分:
```html
<form id="myForm">
<input type="text" id="textInput">
<button type="submit">提交</button>
</form>
<table id="myTable">
<thead>
<tr>
<th>内容</th>
</tr>
</thead>
<tbody></tbody>
</table>
```
JavaScript 部分:
```javascript
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单提交的默认行为
var inputText = document.getElementById("textInput").value; // 获取输入框的值
addToTable(inputText); // 调用表格显示的方法,将输入框的值传递给它
document.getElementById("textInput").value = ""; // 清空输入框
});
function addToTable(text) {
var tableRow = document.createElement("tr"); // 创建新的表格行
var tableData = document.createElement("td"); // 创建新的表格数据
tableData.textContent = text; // 设置表格数据的文本内容
tableRow.appendChild(tableData); // 将表格数据添加到表格行中
document.querySelector("#myTable tbody").appendChild(tableRow); // 将表格行添加到表格中
}
```
这段代码会监听表单的提交事件,获取输入框中的值,然后通过调用 `addToTable` 函数将其添加到表格中。最后,清空输入框的值以便下一次输入。
请注意,这只是一个简单的示例,您可能需要根据您的具体需求进行修改。