html 为表中的许多单元格提供ID

vawmfj5a  于 2023-05-21  发布在  其他
关注(0)|答案(3)|浏览(144)

我有一个奇怪的问题,但对我来说解决这个问题很重要。
我有一个表,它的行和列的数量不稳定,所以我用+=操作符来创建单元格,行等。现在我需要识别每一个细胞,但我不明白在这种情况下我怎么能做到这一点。

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>";
}
ki0zmccv

ki0zmccv1#

通过标识一个单元格,我假设您希望稍后在代码的不同部分引用它们。
你可以通过给你的行和单元格类和/或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

qvtsj1bj

qvtsj1bj2#

您可以用途:

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

mwkjh3gx3#

您可以将每个变量的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'变量,因为它是一个递增的数字。

相关问题