我有一个使用动态生成的数据创建的 HTML 表,每行都有不同的 ID。每行包含 3 列,其中 2 个是文本输入字段,1 个是选择字段。
我想要做的是获取表格每一行的所有内容,但我无法获取所选选项的值。我正在使用 for 循环遍历每一行的每一列值。
我得到了前两个输入字段的正确值,但选择字段给出了未定义的值。
如何获取每个选择字段的选定选项值?
function getData(){
var table = document.getElementById("dataTable");
for (var i = 1, row; row = table.rows[i]; i++) {
var x = row.cells[0].childNodes[0].value;
var y = row.cells[1].childNodes[0].value;
var z = row.cells[2].childNodes[0].value; // select option field
}
}
<td><input value="first" id="first1" name="first[]" /></td>
<td><input value="second" id="second1" name="second[]" /></td>
<td>
<select name="third[]" id="third1">
<option value="option1">One</option>
<option value="option2">Two</option>
</select>
</td>
选择字段似乎是表格单元格的第二个子项,因此由 访问childNodes[1]
。
第一种情况的演示:
function getData(){
var table = document.getElementById("dataTable");
var row;
for (var i = 0, row = table.rows[i]; i < table.rows.length ;i++) {
console.log('here')
var x = row.cells[0].childNodes[0].value;
var y = row.cells[1].childNodes[0].value;
var z = row.cells[2].childNodes[1].value; // select option field
console.log(x,y,z)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dataTable">
<tr>
<td><input value="first" id="first1" name="first[]" /></td>
<td><input value="second" id="second1" name="second[]" /></td>
<td>
<select name="third[]" id="third1">
<option value="option1">One</option>
<option value="option2">Two</option>
</select>
</td>
</tr>
</table>
<button onclick="getData()">Click</button>
发生这种情况的原因是因为您在<td> <select>
. 删除它们,它可以访问childNodes[0]
function getData(){
var table = document.getElementById("dataTable");
var row;
for (var i = 0, row = table.rows[i]; i < table.rows.length ;i++) {
var x = row.cells[0].childNodes[0].value;
var y = row.cells[1].childNodes[0].value;
var z = row.cells[2].childNodes[0].value; // select option field
}
}
<table id="dataTable">
<tr>
<td><input value="first" id="first1" name="first[]" /></td>
<td><input value="second" id="second1" name="second[]" /></td>
<td><select name="third[]" id="third1">
<option value="option1">One</option>
<option value="option2">Two</option>
</select>
</td>
</tr>
</table>
<button onclick="getData()">Click</button>
您还需要结束 for 循环,因此在行数上设置条件
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句