javascript - 访问 HTML 表格单元格数据

Question

我需要访问 html 单元格的数据，但在此之前，我需要将数组的 id (details[i].id) 存储在单元格中。我尝试使用隐藏，但是当我显示表格时我得到一个空单元格，这不是我想要的，我想要的是类似于 ASP.net 中的 DataKeyNames 的东西，这使我们有机会存储 id 而不必显示它.

这是我用来在 html 表中显示数组(详细信息)的代码:

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>'

        }



    }
}

最后，在 removeDetail 函数中，我需要获取单元格值，假设我以某种方式将 id 放在那里。

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.



}

希望你能帮帮我。

Answer 1

第一步:将索引存储为元素的自定义属性:

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

第二步:将行存储为全局数组的一部分:

details[i].row = newRow;

最后一步:在removeDetail函数中读取索引，您就拥有了所需的一切:

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