Tengo una tabla html , que está estructurada así:
<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>Puedo iterar sobre las casillas de verificación usando el código a continuación y empujar las filas marcadas en una matriz:
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); } Pero, ¿cómo haría para iterar sobre la table y presionar el color (2º col) en su lugar, usando javascript ?
¡Gracias!
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>