如何从表中获取值（选项值）

Question

在 html 中有这个表，在列（col6 和 col7）我有元素

我想根据列中选择的选项（col6和col7）从表中获取所有数据

我的函数甚至可以很好地从表中获取所有数据并将其存储在一个数组中，最大的问题是我不能只获取列中的选定值（col 6 和 Col7）我尝试了几种方法, 但它总是获取

 function save_Table(){ var myData = document.getElementById('tab').rows; data = [] for (var i = 1; i < myData.length; i++) { el = myData[i].children my_el = [] for (var j = 0; j < el.length; j++) { my_el.push(el[j].textContent ); } data.push(my_el) } console.log(data) }

 table, th, td { border: 1px solid black; border-collapse: collapse; }

 <table id="tab"> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> <th>Col 5</th> <th>Col 6</th> <th>Col 7</th> </tr> </thead> <tbody> <tr> <td>TEST</td> <td>123</td> <td>TEST</td> <td>Text</td> <td>5</td> <td><select class="browser-default"> <option value=""></option> <option value="Yes">Yes</option> <option value="No">No</option> </select></td> <td><select class="browser-default"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">2</option> </select></td> </tr> <tr> <td>TEST</td> <td>124</td> <td>TEST</td> <td>Text</td> <td>6</td> <td><select class="browser-default"> <option value=""></option> <option value="Yes">Yes</option> <option value="No">No</option> </select></td> <td><select class="browser-default"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">2</option> </select></td> </tr> </tbody> </table> <button onclick="save_Table()">Teste</button>

Answer 1

Element.textContent从字面上抓取文本，您需要子select表单的value属性。 嵌套 for 循环中的保护子句应该可以解决问题：

if (el[j].children[0]?.tagName == 'SELECT') {
    my_el.push(el[j].children[0].value);
    continue;  
}

 function save_Table(){ var myData = document.getElementById('tab').rows; let data = [] for (var i = 1; i < myData.length; i++) { let el = myData[i].children let my_el = [] for (var j = 0; j < el.length; j++) { if (el[j].children[0]?.tagName == 'SELECT') { my_el.push(el[j].children[0].value); continue; } my_el.push(el[j].textContent); } data.push(my_el) } console.log(data) }

 table, th, td { border: 1px solid black; border-collapse: collapse; }

 <table id="tab"> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> <th>Col 5</th> <th>Col 6</th> <th>Col 7</th> </tr> </thead> <tbody> <tr> <td>TEST</td> <td>123</td> <td>TEST</td> <td>Text</td> <td>5</td> <td><select class="browser-default"> <option value=""></option> <option value="Yes">Yes</option> <option value="No">No</option> </select></td> <td><select class="browser-default"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">2</option> </select></td> </tr> <tr> <td>TEST</td> <td>124</td> <td>TEST</td> <td>Text</td> <td>6</td> <td><select class="browser-default"> <option value=""></option> <option value="Yes">Yes</option> <option value="No">No</option> </select></td> <td><select class="browser-default"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">2</option> </select></td> </tr> </tbody> </table> <button onclick="save_Table()">Teste</button>