使用JavaScript在表中创建新行，使用innerHTML设置输入变量，但用户输入的值在提交时不会过帐
在使用JavaScript在表中创建新行时，可以使用innerHTML属性来设置输入变量，但是用户输入的值在提交时不会被保存的原因可能有多种。
一种可能的原因是没有正确处理表单的提交事件。在表单提交时，需要使用JavaScript监听表单的提交事件，并在事件处理程序中获取用户输入的值，并将其保存到服务器或其他持久化存储中。可以使用addEventListener方法来监听表单的提交事件，并在事件处理程序中执行保存操作。
另一种可能的原因是没有正确设置表单元素的name属性。在表单提交时，浏览器会将表单中所有具有name属性的表单元素的值一起提交到服务器。如果没有为输入元素设置name属性，那么用户输入的值就无法被提交保存。
此外，还需要确保表单的提交方式正确设置为POST或GET，并且目标URL正确指向服务器端的处理程序。
以下是一个示例代码，演示如何使用JavaScript在表中创建新行，并在提交时保存用户输入的值：
<!DOCTYPE html>
<html>
<head>
<title>表单示例</title>
</head>
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="text" name="name"></td>
<td><input type="text" name="age"></td>
</tr>
</table>
<button onclick="addRow()">添加行</button>
<button onclick="submitForm()">提交</button>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<input type='text' name='name'>";
cell2.innerHTML = "<input type='text' name='age'>";
}
function submitForm() {
var form = document.createElement("form");
form.method = "POST";
form.action = "save.php"; // 替换为服务器端保存数据的处理程序URL
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
var inputs = rows[i].getElementsByTagName("input");
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
var name = input.name;
var value = input.value;
var hiddenField = document.createElement("input");
hiddenField.type = "hidden";
hiddenField.name = name;
hiddenField.value = value;
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
</script>
</body>
</html>在上述示例代码中，点击"添加行"按钮会在表格中添加一行，并在每个单元格中创建一个带有name属性的输入框。点击"提交"按钮会创建一个新的表单元素，将用户输入的值作为隐藏字段添加到表单中，并将表单提交到服务器端的处理程序（save.php）进行保存。
请注意，上述示例代码仅演示了如何使用JavaScript在表中创建新行并保存用户输入的值，实际应用中还需要根据具体需求进行适当的修改和完善。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
