Question

我想创建一个表格，其中每个单元格都具有x和y的数据属性，采用笛卡尔式的方式：x应按行增加y 1}}由细胞。问题是我能想到的唯一实现是先创建行然后每行插入单元格。它与y一起使用，因为我可以使用每个创建的单元格增加它，它将始终为1到10.但它与x完全不兼容。我已经尝试在循环中创建额外的循环，但它并没有完全解决。我应该完全重写逻辑，还是有另一种方式？谢谢！

function setAttributes(el, attrs) {
  for(let key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

const rows = 10;
const columns = 10;
const table = document.getElementById('table');

function initBoard() {

 for (let i = rows - 1; i >= 0; i--) {
   const row = document.createElement('tr');

   for (let k = columns - 1, x = 1, y = 1; k >= 0; k--) {
     let cell = document.createElement('td');
                                  // ↓ Should be another way
     setAttributes(cell, { 'data-x': x++, 'data-y': y++ });
     row.appendChild(cell)
   };

   table.appendChild(row)
 };
}

window.onload = initBoard();

JSfiddle with above code

JS，用坐标动态创建表

0 个答案: