将多个动态生成的文本框值显示到一个数组中,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>动态生成文本框</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="textboxes">
<!-- 动态生成的文本框将会添加到这里 -->
</div>
<button onclick="getValues()">获取文本框的值</button>
<p id="result"></p>
<script>
var values = []; // 存储文本框的值的数组
// 动态生成文本框的函数
function generateTextBox() {
var textBox = document.createElement("input");
textBox.type = "text";
textBox.className = "dynamic-textbox";
document.getElementById("textboxes").appendChild(textBox);
}
// 获取文本框的值并存储到数组中
function getValues() {
values = []; // 清空数组
var textboxes = document.getElementsByClassName("dynamic-textbox");
for (var i = 0; i < textboxes.length; i++) {
values.push(textboxes[i].value);
}
document.getElementById("result").innerHTML = "文本框的值:" + values.join(", ");
}
// 示例:动态生成3个文本框
generateTextBox();
generateTextBox();
generateTextBox();
</script>
</body>
</html>
在上述示例中,我们使用了JavaScript和jQuery库来实现动态生成文本框和获取文本框的值。点击"获取文本框的值"按钮后,会将文本框的值存储到数组中,并在页面上展示出来。你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云