如何使用js获取div-table中的相邻列值？

Question

我有一个 html table，它的结构是这样的：

<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>

我可以使用下面的代码遍历复选框并将选中的行推送到数组中：

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);
}

但是我将如何迭代 table 并改为使用 javascript 推送颜色 (2º col)？

谢谢！

Answer 1

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>

如何使用js获取div-table中的相邻列值？

How to get adjacent col value in a div-table using js?

html

javascript

html-table