Question

I need to access to the data of a html cell,but before that ,I need to store the id of my array (details[i].id) in a cell. I tried with a hidden, but I get an empty cell when I show the table and that’s not what I want, what I want is something like the DataKeyNames in ASP.net, that gives us the chance to store the id without necessarily showing it.

This is the code I use to show my array (details) in a html table:

function showTable()
{
    if (details.length>0){
        for (var i=0; i<details.length;i++)
        {
            var tbl = document.getElementById('myTable');

            var newRow = tbl.insertRow(tbl.rows.length);

            var cell1 = newRow.insertCell(0);
            cell1.textAlign='center';
            cell1.innerHTML=details[i].price;

            var cell2 = newRow.insertCell(1);
            cell2.textAlign='center';
            cell2.innerHTML=details[i].description;

            var cell3 = newRow.insertCell(2);
            cell3.textAlign='center';
            cell3.innerHTML='<a href="#"><img src="images/delete.png" width="14" height="14" alt="Delete" onclick="removeDetail(this)"/></a>'

        }



    }
}

And finally in the removeDetail function is where I need to get the cell value, assuming I somehow put the id there.

function removeDetail(r)
{
    var node = r.parentNode;
    while( node && node.tagName !== 'TR' ) {
        node = node.parentNode;
    }
    var i=node.rowIndex;

    document.getElementById('myTable').deleteRow(i);

    //here's where I need to get the id and, if posible the other values ( price, description) too.



}

Hope you can help me out.

Answer 1

First step: store the index as custom attribute of your element:

cell3.innerHTML='<a href="#"><img src="images/delete.png" width="14" height="14" alt="Delete" onclick="removeDetail(this)" details_index="' + i + '" /></a>'

Second step: store the row as part of the global array:

details[i].row = newRow;

Final step: In the removeDetail function read the index and you have all you need:

function removeDetail(r)
{
    var item = details[parseInt(r.getAttribute("details_index"), 10)];
    item.row.style.display = "none";
    alert("price: " + item.price + ", description: " + item.description);
}