Home / Questions / 389661
Accepted
René Merlo
Asked: 2020-09-15 18:55:36 +0800 CST 2020-09-15 18:55:36 +0800 CST

How do I dynamically store a value in a td of a table?

  • 772

I will detail my problem, I am building a table using JavaScrip and with this I have no problem, I already have it running, but what I need is to save a value within the tds tags for later, if I go through all the tds of the table, to be able to count on the ids of the elements that I put in the table. Somewhere I saw that it can be done, but there is always a but, I don't remember how, which is why I ask you for help.

It would be something like this

<tr>
   <td clave=1>Item_1</td>
</tr>
<tr>
   <td clave=2>Item_2</td>
</tr>

From now on, thank you very much and I await some clue where to continue my search.

javascript

1 Answers

  1. Best Answer

    There is an option you can use which is dataset , it is accessible natively from HTML or javascript. To the element you add the option data-identificador="valor".

    And from the javascript you access in the form element.dataset.identificador, both to assign and to consult.

    document.addEventListener("DOMContentLoaded", () => {
    añadeitem(3);
    añadeitem(4);

    var ids = [];
    var tabla = document.getElementById('tabla');
    for (const row of tabla.rows) {
        ids.push(row.cells[0].dataset.clave);
    }
    console.log(ids);
});

function añadeitem(id) {
    var tabla = document.getElementById('tabla');
    var row = tabla.insertRow();
    var cell = row.insertCell();
    cell.dataset.clave = id;
    cell.innerText = "item " + id;
}
    #tabla, td{
  border: 1px solid blue;
}
    <TABLE id="tabla" >
        <tr>
            <td data-clave="1">Item_1</td>
        </tr>
        <tr>
            <td data-clave="2">Item_2</td>
        </tr>
    </TABLE>

    • 0