Question

我可能有一些奇怪的问题，但解决这个问题对我来说非常重要。我有表没有稳定的行和列数，所以我把+ =运算符创建单元格，行等等。现在我需要识别每个单元格，但我不明白我怎么能在这个情况。

function drawBoard(board) {
var t="";
t="<table border: 2px >";
var x,y;
for(x=0; x<board.length; x++){
   t+="<tr>";
   for(y=0; y<board.length; y++){
       t+="<td class='tablecell' onclick=''>X</td>"
   }
   t+="</tr>";
}
t+="</table>";
}

Answer 1

通过识别一个单元格，我假设您希望稍后在代码的不同部分引用它们。

您可以通过提供行和单元格类和/或ID来实现它。

对于一行，例如：

t += '<tr id="tr-' + x + '">';

表示单元格

t += '<td class="tablecell tr-' + x + ' col-' + y + '" onclick="" id="td-' + x + '-' + y + '">X</td>'

然后行可以由#tr-x和单元格#tr-x > td以及所有特定的列.col-y

引用

Matheus Avellar提到，如果您想使用#td-x-y

引用网格上的特定单元格，也会在单元格中添加ID

Answer 2

您可以使用：

const cells = document.getElementsByClassName('tablecell')

或者您可以收集创作阶段的每个单元格，例如：

const cells = [];

for (let i = 0; i <  board.length){
  for (let j = 0; j < board.length){
    const cell = document.createElement('td');
    cells.push(cell);
  }
}

Answer 3

您可以将每个的id设置为等于'y'变量。

类似的东西：

function drawBoard(board) {
  var t = "";
  t = "<table border: 2px >";
  var x, y;
  for (x = 0; x < board.length; x++) {
    t += "<tr>";
    for (y = 0; y < board.length; y++) {
      t += `<td id="table-${y}" class='tablecell' onclick=''>X</td>`
    }
    t += "</tr>";
  }
  t += "</table>";
}

使用一些ES6模板文字，您可以设置将您的ID绑定到'Y'变量，因为它是一个递增的数字。

ID到许多元素元素

3 个答案: