【问题标题】:How to set id to a <tr> generated from a JSON response?如何将 id 设置为从 JSON 响应生成的 <tr>?
【发布时间】:2013-07-31 23:30:12
【问题描述】:

我想为我的行动态设置 ID。我有这个:

function (json) {
        for (var ib = 0; ib < json.length; ib++) {
            var tableib = document.getElementById("treatments");
            var treatmentId = json[ib].id;
            var rowib = tableib.insertRow(-1);
            var cell1ib = rowib.insertCell(0);
            var cell2ib = rowib.insertCell(1);
            var cell3ib = rowib.insertCell(2);
            var cell4ib = rowib.insertCell(3);
            var cell5ib = rowib.insertCell(4);
            var buttonID = json[ib].id;
            cell1ib.innerHTML = json[ib].name;
            cell2ib.innerHTML = json[ib].time;
            cell3ib.innerHTML = json[ib].price + "kr";
            cell4ib.innerHTML = json[ib].details;
            cell5ib.innerHTML = "Button";
        }
    });

我要设置的 ID 来自 JSON 响应并具有变量 buttonID。这甚至可能还是我应该像这样附加每一行? :

$('#treatments').append("<tr><td>" + shopName + "</td><td>" + shopTime + "</td><td>" + shopPrice + "</td><td>" + shopDetails + "</td><td><center>" + editShop + deleteShop + "</center></td></tr>"); 

我可以在其中更改正在附加的字符串。

【问题讨论】:

    标签: javascript html json html-table


    【解决方案1】:

    HTMLTableRowElement 元素,像所有HTMLElement 元素一样,有一个id property,所以:

    rowib.id = buttonID;
    

    ...会做的。

    【讨论】:

      【解决方案2】:

      如果您在行的数据源对象中使用 DT_RowId 属性。 DataTables 会自动添加行 ID。

      检索: $(row).parents('tr').attr(id')

      谷歌:

      将行 ID 分配给 Json 数据 - DataTables 论坛

      从这里获得帮助。

      【讨论】:

      • 这里没有看到任何数据表。只是普通的浏览器表。
      • 他正在返回 json,所以这可以与数据源本身的行绑定。
      • JSON 被广泛使用,与 DataTables 没有任何关系。问题中没有任何迹象表明他正在使用它们。
      • 是的.. 但是如果不注意这可能会导致冲突。看 var buttonID = json[ib].id; & 相同的处理 ID。希望他不会对两个不同的事物使用相同的 id 分配。
      • 没有冲突。他调用的对象json 与DOM 无关。他只是将他从中检索到的id 值分配给一个DOM 元素。应有的尊重,但答案和后续的cmets顶多与问题切线相关,当然不回答了。
      猜你喜欢
      • 1970-01-01
      • 2014-05-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-18
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多