Question

我已经创建了一个带div和span的自定义表格，在这个表格中，我想从一个数组中添加值，但是我不知道如何做到这一点。

<div class="cust_table">
  <div id="mytab1" class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>

  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
</div>

所以我有这个数组：

var arry = [];
for (var i = 1; i <= 3; i++) {
   arry.push(i);
}

我想在span单元格上写下1到3的所有值

var sel = document.querySelectorAll(.cell);

最终将数组中的位置与行单元格中的位置匹配。

Answer 1

您可以使用 getElementsByClassName() 方法按类名获取元素，并在 Array.from() 和 {{3 }} 方法。 Array#forEach 有助于将Nodelist转换为数组， Array.from() 有助于迭代它们。

var arr = [1, 2, 3, 4];

Array.from(document.getElementsByClassName('row')).forEach(function(ele) {
  Array.from(ele.getElementsByClassName('cell')).forEach(function(e, i) {
    e.textContent = arr[i];
  });
})

<div class="cust_table">
  <div id="mytab1" class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
</div>

ESI中引入了

FYI： Array#forEach 方法，因此对旧浏览器使用Array.from()并检查[].slice.apply()。

<小时/> 更新： 使用 polyfill option for Array#forEach method 从数组生成索引中随机添加元素并更新。

var arr = [1, 2, 3];

Array.from(document.getElementsByClassName('cell')).forEach(function(e, i) {
  // generate index value within `0` and `arr.length - 1` and get element
  e.textContent = arr[Math.round(Math.random()*(arr.length-1))];
});

<div class="cust_table">
  <div id="mytab1" class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
</div>

Answer 2

我猜错了</div>。我会做这样的工作;

＆＃13;

var rows = [...document.querySelectorAll(".cust_table .row")];
   table = rows.map(r => [...r.querySelectorAll(".cell")].map((c,i) => c.textContent = i+1));
console.log(table);

＆＃13;

<div class="cust_table">
  <div id="mytab1" class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
</div>

＆＃13;

迭代同一行上的元素

2 个答案: