我有一個表，每行都有復選框。在選擇該行的地方，我想獲取該行的列值。<table id="tblBrowse"> <thead> <tr role="row"> <th> <input type="checkbox" id="chkboxBrowseSelectAll" value=""> </th> <th>Order No</th> <th>Ship To</th> <th>Sold To</th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td> <input type="checkbox"> </td> <td class="sorting_1">1959-01</td> <td>123</td> <td>456</td> </tr> <!-- And lots more of the same thing --> </tbody></table>我可以獲取選中的復選框，但如何獲取值 123 和 456？$('#btnTest').click(function () { var checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked'); // Where do I go from here?});我可以使用 jQuery 或純 JS，但必須與 IE 兼容。
2 回答
郎朗坤
TA貢獻1921條經驗 獲得超9個贊
您可以循環遍歷所有checkedBoxes使用.forEach()方法，然后使用.closest("tr")查找最接近該復選框的表行，然后獲取該行的列值。
var checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
checkedBoxes.forEach(chk => {
chk.closest("tr").querySelectorAll('td:not(:first-child)').forEach((td, index) => {
console.log(index, td.innerHTML)
});
})
:not(:first-child)這里需要注意的一個重要事項是in的使用.querySelectorAll('td:not(:first-child)')。這樣做是為了我們可以忽略每行中的第一列，因為這是一個復選框列，我們的邏輯不需要它的內容。
演示：
document.getElementById("btnTest").addEventListener("click", function() {
var checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
checkedBoxes.forEach(chk => {
chk.closest("tr").querySelectorAll('td:not(:first-child)').forEach((td, index) => {
console.log(index, td.innerHTML)
});
})
});
<button id="btnTest">Get Value</button>
<table id="tblBrowse">
<thead>
<tr role="row">
<th>
<input type="checkbox" id="chkboxBrowseSelectAll" value="">
</th>
<th>Order No</th>
<th>Ship To</th>
<th>Sold To</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>
<input type="checkbox">
</td>
<td class="sorting_1">1959-01</td>
<td>123</td>
<td>456</td>
</tr>
<!-- And lots more of the same thing -->
</tbody>
</table>
- 2 回答
- 0 關注
- 178 瀏覽
添加回答
舉報
0/150
提交
取消