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

srd091

我有一个使用动态生成的数据创建的 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Javascript或JQuery的Gridview中获取选定的行

如何在PHP发出的表格行中使用JavaScript检查所有复选框

如何在javascript中的redis中获取所有键和值?

如何使用JavaScript从Google电子表格中列的所有值中获取排序后的唯一值

如何在JavaScript中获取HTML选项值?

如何在javascript中获取频率值?

如何在JavaScript中获取<a>标记的值

如何在Javascript中向上移动表格的所有行?

如何在Javascript中获取类值

如何在javascript中获取文件对象的所有属性?

如何在Javascript中以pdf格式获取选定的文本?

如何在JavaScript中增加地图的所有值

如何在javascript中获取选定的td行值?

如何在“选择”下拉列表中获取选定的选项值

如何在所有函数中获取相同的JavaScript变量的值

如何获取选定选项的值并将其保存到变量中?(Javascript)

如何在JavaScript中获取selectcheckboxmenu的值

如何在javascript变量中获取jquery select2选定的值

如何在javascript中获取所有数字

如何在TextBoxes中获取dataGridView的选定行的所有列值

如何在Javascript中映射所有叶节点的值?

如何在运行时通过 JavaScript 将 HTML 表格数据获取到选定的选项中

如何在javascript中获取select的值?

如何在javascript中获取选项值

如何在javascript中创建表格以及其中的所有元素和信息

如何在javascript中获取所有Map值的总和?

如何从多选输入中获取所有选定的值?

如何在 JavaScript 中获取 Array 的所有项中存在的公共值元素

如何在 JavaScript 变量中存储表中选定的行