Estoy tratando de dar a cada celda de una tabla un identificador como en esta foto  Lo siento por esto lol

Esto es lo que probé pero no funciona:

function init() {
    var board = document.createElement('table');
    board.setAttribute("border", 1);
    board.setAttribute("cellspacing", 0);
    board.setAttribute("id", 'tbl');

    var identifier = 0;// <-------
    for (var i = 0; i < GRID_SIZE; i++) {
        var row = document.createElement('tr');
        board.appendChild(row);
        for (var j = 0; j < GRID_SIZE; j++) {
            var cell = document.createElement('td');
            cell.setAttribute('height', 20);
            cell.setAttribute('width', 20);
            cell.classList.add('col' + j, 'row' + i);
            cell.identifier = identifier; // <-------
            row.appendChild(cell);
            identifier += identifier;// <--------this is the problem
        }
    }

    document.getElementById("main").appendChild(board);
}
0
Moswers 16 abr. 2020 a las 18:29

3 respuestas

La mejor respuesta

En primer lugar, en lugar de propiedades personalizadas, debe usar atributos de datos y en lugar de los atributos width y height, debe usar CSS. En segundo lugar, estaba incrementando identifier por sí mismo, por lo que no crecería de 0.

const GRID_SIZE = 6;

function init() {
    var board = document.createElement('table');
    board.setAttribute("border", 1);
    board.setAttribute("cellspacing", 0);
    board.setAttribute("id", 'tbl');

    var identifier = 0;
    for (var i = 0; i < GRID_SIZE; i++) {
        var row = document.createElement('tr');
        board.appendChild(row);
        for (var j = 0; j < GRID_SIZE; j++) {
            var cell = document.createElement('td');
            cell.dataset.identifier = identifier;
            cell.innerText = identifier;
            row.appendChild(cell);
            identifier++;
        }
    }

    document.getElementById("main").appendChild(board);
}
init();
main>table td {
  width: 20px;
  height: 20px;
}
<main id="main"></main>

Además, no necesita almacenar las coordenadas de la celda, ya que puede calcularlas a partir del identificador de esta manera:

row = Math.floor(identifier / GRID_SIZE);
column = identifier % GRID_SIZE;
2
D. Pardal 16 abr. 2020 a las 15:46

GRID_SIZE*i+j;

Ponlo dentro de la celda usando cell.innerHTML=GRID_SIZE*i+j;

function init(GRID_SIZE) {
  var board = document.createElement('table');
  board.setAttribute("border", 1);
  board.setAttribute("cellspacing", 0);
  board.setAttribute("id", 'tbl');

  var identifier = 0; // <-------
  for (var i = 0; i < GRID_SIZE; i++) {
    var row = document.createElement('tr');
    board.appendChild(row);
    for (var j = 0; j < GRID_SIZE; j++) {
      var cell = document.createElement('td');
      cell.setAttribute('height', 20);
      cell.setAttribute('width', 20);
      cell.innerHTML = GRID_SIZE * i + j;
      cell.classList.add('col' + j, 'row' + i);
      cell.identifier = identifier; // <-------
      row.appendChild(cell);
      identifier += identifier; // <--------
    }
  }

  document.getElementById("main").appendChild(board);
}
init(10)
<div id="main"></div>
0
Rkv88 - Kanyan 16 abr. 2020 a las 15:39

Use la id etiqueta HTML para proporcionar un identificador único a un elemento DOM .

cell.id = identifier;

i = i + 1 Operadora de JavaScript {{0}}
identifier++;
function init() {
    
    // Debug
    let K_SIZE = 5;
    
    var board = document.createElement('table');
    board.setAttribute("border", 1);
    board.setAttribute("cellspacing", 0);
    board.setAttribute("id", 'tbl');

    var identifier = 0;
    for (var i = 0; i < K_SIZE; i++) {
        var row = document.createElement('tr');
        board.appendChild(row);
        for (var j = 0; j < K_SIZE; j++) {
            var cell = document.createElement('td');
            cell.setAttribute('height', 20);
            cell.setAttribute('width', 20);
            cell.classList.add('col' + j, 'row' + i);
            cell.id = identifier; // <-------
            row.appendChild(cell);
            //boxes.push(cell);
            identifier++;// <--------
        }
    }

    document.getElementById("main").appendChild(board);
}
init();
<div id='main'></div>
0
0stone0 16 abr. 2020 a las 15:38