How to get adjacent col value in a div-table using js?
Question
I have an html table, which is structured like this:
<body>
<div class="block div-table" id="sidebar-record-block">
<div class="div-table-row">
<div class="div-table-header">Sel</div>
<div class="div-table-header">Color</div>
<div class="div-table-header">Hex</div>
</div>
<div id="field-0000" class="div-table-row">
<input type="checkbox" class="div-table-td" name="checkBox" id="cbfield-0000">
<div class="div-table-td">yellow</div>
<div class="div-table-td"></div>
</div>
<div id="field-0001" class="div-table-row">
<input type="checkbox" class="div-table-td" name="checkBox" id="cbfield-0001">
<div class="div-table-td">red</div>
<div class="div-table-td"></div>
</div>
</body>
I can iterate over the checkboxes using the code below and push the checked rows into an array:
saveButton.onclick = function(){
var checkedRowIndexes = [];
var selectedColors = [];
var checkedRows = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkedRows.length; i++){
if (checkedRows[i].checked){
checkedRowIndexes.push(i);
}
}
console.log(checkedRowIndexes);
}
But how would I go about iterating over the table and push the color (2º col) instead, using javascript ?
Thank you!
1 answers
solution1
0 ACCPTED 2022-01-20 20:52:34
var checkedRowIndexes = []; var selectedColors = []; var checkedRows = document.querySelectorAll("input[type='checkbox']"); for (var i = 0; i < checkedRows.length; i++) { if (checkedRows[i].checked) { checkedRowIndexes.push(i); selectedColors.push(checkedRows[i].nextElementSibling.innerText); } } console.log(checkedRowIndexes, selectedColors);
<div class="block div-table" id="sidebar-record-block"> <div class="div-table-row"> <div class="div-table-header">Sel</div> <div class="div-table-header">Color</div> <div class="div-table-header">Hex</div> </div> <div id="field-0000" class="div-table-row"> <input type="checkbox" class="div-table-td" name="checkBox" id="cbfield-0000"> <div class="div-table-td">yellow</div> <div class="div-table-td"></div> </div> <div id="field-0001" class="div-table-row"> <input type="checkbox" class="div-table-td" name="checkBox" id="cbfield-0001"> <div class="div-table-td">red</div> <div class="div-table-td"></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to add a table header to this div-table within a script?
How to get the value of adjacent element and change it using Javascript or Jquery
How to get value inside a div element using JS
How to make adjacent col's input field mandatory based on a selection in another column/same row HTML Table?
How to get selected value from table using Angular.js
How to get this HTML table's text box value using JS?
How to get value from table using Angular.js?
How to get this HTML Table textarea's value using JS?
How to get value from HTML <div> by js
How to get the data from an adjacent column when clicking on a button/icon in the same row using JS?
Related Tags