如何在 JavaScript 中获取所有表格行的选定选项值？答案

【问题标题】：How to get selected option value of all rows of table in JavaScript?如何在 JavaScript 中获取所有表格行的选定选项值？
【发布时间】：2017-08-23 00:34:29
【问题描述】：

我有一个使用动态生成的数据创建的 HTML 表，其中每一行都有不同的 ID。每行包含 3 列，其中 2 列是文本输入字段，1 列是选择字段。

我想要做的是获取表格每一行的所有内容，但我无法获取所选选项的值。我正在使用 for 循环遍历每一行的每一列值。

我得到了前两个输入字段的正确值，但选择字段给出了 undefined 值。

如何获取每个选择字段的选择选项值？

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>

【问题讨论】：

JavaScript 使用从零开始的索引；这意味着第一个单元格位于索引0，而不是1，最后一个单元格位于索引2，而不是3。
element.options[element.selectedIndex].value
@DavidThomas 感谢您指出，这是一个错字。

标签： javascript html html-table cell

【解决方案1】：

选择字段似乎是表格单元格的第二个子项，因此由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 循环，从而对行数设置条件

【讨论】：