如何使用js获取div表中相邻列的值？答案

【问题标题】：How to get adjacent col value in a div-table using js?如何使用js获取div表中相邻列的值？
【发布时间】：2022-01-21 05:03:31
【问题描述】：

我有一个html 表，其结构如下：

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

谢谢！

【问题讨论】：

标签： javascript html html-table

【解决方案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>

【讨论】：

谢谢，但正如问题的结尾所说，我们如何获得颜色而不是索引。我想这将是一个嵌套的for loop?感谢您的时间。
对，如果选中该复选框，您想要获取颜色值。尝试更新的代码
太棒了！我心里想它已经很接近了，但是到这里已经让我的脑海里充满了太多，我今天无法得到足够的东西。谢谢！