在前端开发中,可以通过动态创建元素tr并将其发送到一个函数中,然后在函数中获取td中输入的值。下面是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>动态创建元素示例</title>
</head>
<body>
<table id="myTable">
<tr>
<td><input type="text" id="input1"></td>
<td><input type="text" id="input2"></td>
<td><button onclick="sendRow()">发送</button></td>
</tr>
</table>
<script>
function sendRow() {
var table = document.getElementById("myTable");
var newRow = document.createElement("tr");
var input1 = document.getElementById("input1").value;
var input2 = document.getElementById("input2").value;
var newCell1 = document.createElement("td");
newCell1.innerHTML = input1;
newRow.appendChild(newCell1);
var newCell2 = document.createElement("td");
newCell2.innerHTML = input2;
newRow.appendChild(newCell2);
table.appendChild(newRow);
}
</script>
</body>
</html>
在上述代码中,我们通过document.createElement
方法动态创建了一个tr元素,并获取了两个输入框input1和input2中的值。然后,我们创建了两个新的td元素,并将输入框的值赋给它们的innerHTML属性。最后,将新创建的td元素添加到tr元素中,并将tr元素添加到表格中。
这样,当点击"发送"按钮时,会触发sendRow函数,动态创建一个包含输入框值的新行,并将其添加到表格中。
这个功能在表单提交、数据展示等场景中非常常见。
领取专属 10元无门槛券
手把手带您无忧上云