How to set up the ID generated in the Javascript code to be the ID of a cell?

Julia Andriessan 0
Viewed 21

From this code, once you pressed the button, it will generate a new table row with 16 cells. I came up with the ideal ID for each cell, in the pattern of 'RxCx', and I'd like to ask everyone what code's still missing to let it be each cell's ID?

Thanks a lot for your help!

const tab = document.getElementById("tab");
const btn1 = document.getElementById("btn1");
var rowCount = 0;
var cellCount = 0;

btn1.addEventListener('click', () => {
      var row = tab.insertRow(-1);
      rowCount++;

      for (var i = 0; i <= 15; i++) {
        row.insertCell(i);
        cellCount = i + 1;

        var ID = "";
        ID = ID + "R" + rowCount + "C" + cellCount;
        console.log(ID);
      }
});
<body>
  <button id="btn1">Add</button>
  <table id="tab"></table>
</body>

javascript html
3 Answers

You can set the ID of the td via setAttribute(), e.g.

const td = row.insertCell(i);
td.setAttribute("id", "some-id");

It's also possible to access the cells by row- and column index instead of ID, e.g.

const td = tab.rows[0].cells[10];


const tab = document.getElementById("tab");
const btn1 = document.getElementById("btn1");
let rowCount = 0;

btn1.addEventListener('click', () => {
  const row = tab.insertRow(-1);
  rowCount++;

  for (let i = 0; i <= 15; i++) {
    const cell = row.insertCell(i);
    const id = "R" + rowCount + "C" + i;
    cell.setAttribute("id", id);
    console.log(id);
  }
  
  console.log("0|10: " + document.getElementById("R1C10"));
  
  // Directly access cell via row- and column index
  console.log("0|10: " + tab.rows[0].cells[10]);
 });
<body>
  <button id="btn1">Add</button>
  <table id="tab"></table>
</body>

majusebetter0

One approach is as follows, with explanatory comments in the JavaScript:

const tab = document.getElementById("tab");
const btn1 = document.getElementById("btn1");
let rowCount = 0;
let cellCount = 0;

btn1.addEventListener('click', () => {
  let row = tab.insertRow(-1);
  rowCount++;

  for (let i = 0; i <= 15; i++) {
    // getting a reference to the inserted cell:
    let c = row.insertCell(i);
    cellCount = i + 1;

    let ID = "";
    // using += to append the right side of the assignment to the end
    // of the existing value:
    ID += "R" + rowCount + "C" + cellCount;
    
    // using c.id to update the id property of the c element
    // to the value held in the ID variable:
    c.id = ID;
  }
});
td {
  min-block-size: 2em;
  min-inline-size: 2em;
}

td[id]::before {
  content: attr(id);
}
<body>
  <button id="btn1">Add</button>
  <table id="tab"></table>
</body>

JS Fiddle demo.

I would probably modify the approach to remove the (unnecessary) counters, and instead make use of the HTMLTableRowElement.rowIndex and HTMLTableCellElement.cellIndex properties of the nodes that you're already creating:

const tab = document.getElementById("tab");
const btn1 = document.getElementById("btn1");

btn1.addEventListener('click', () => {
  let row = tab.insertRow(-1);

  for (let i = 0; i <= 15; i++) {
    let c = row.insertCell(i);
    
    // using a template-literal string to concatenate JavaScript
    // variables into the string, here we increment the value of
    // rowIndex and cellIndex since it seems you want to start
    // counting at 1, rather 0 (as JavaScript does by default):
    c.id = `R${++row.rowIndex}C${++c.cellIndex}`;
  }
});
td {
  min-block-size: 2em;
  min-inline-size: 2em;
}

td[id]::before {
  content: attr(id);
}
<body>
  <button id="btn1">Add</button>
  <table id="tab"></table>
</body>

JS Fiddle demo.

References:

David Thomas0

You can set the Id or other properties when you call insertCell

e.g.

row.insertCell(i).id = 'YourId'
w_all0
Related