Javascript 如何在JS中动态创建的表中添加可点击文本

我有一个基于JSON响应的动态生成表。该表有3列-1列代表序号，2列代表名称，3列应该有两个文本链接，如

Edit | Delete

Edit

和

Delete

应该可以单独单击，单击它们后，我希望检索相应的JSON对象，以便能够进一步处理它

范例-

JSON响应：

[
  {
    "id": 2,
    "owner": 1,
    "name": "General"
  },
  {
    "id": 3,
    "owner": 1,
    "name": "Specific"
  },
  {
    "id": 10,
    "owner": 1,
    "name": "One more"
  },
  {
    "id": 11,
    "owner": 1,
    "name": "Test Category"
  }
]

JS根据上述JSON数据生成表：

function populateTable(data) {

    const resLen = data.length;

    var col = [];

    col.push("S. No.");

    for (var i=0; i<data.length; i++) {
        for (var key in data[i]) {
            if (col.indexOf(key) === -1 && key == "name") {
                col.push(key);
            }
        }
    }

    col.push(" ");

    var table = document.createElement("table");

    var tr = table.insertRow(-1);

    for (var i=0; i<col.length; i++) {
        var th = document.createElement("th");

        if (col[i] == "name") {
            th.innerHTML = "Name";
            tr.appendChild(th);
        } else {
            th.innerHTML = col[i];
            tr.appendChild(th);
        }
    }

    for (var i=data.length-1; i>=0; i--) {
        tr = table.insertRow(-1);

        for (var j=0; j<col.length; j++) {
            var tabCell = tr.insertCell(-1);

            if (j == 0) {
                tabCell.innerHTML = ((data.length-1) - i)+1;
            } else if (j == 2) {
                tabCell.innerHTML = "Delete"
            } else {
                tabCell.innerHTML = data[i][col[j]];
            }
        }
    }

    var divContainer = document.getElementById("categoriesTable");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
}

函数populateTable（数据）{
const resLen=data.length；
var col=[]；
col.push（“编号”）；
对于（var i=0；i首先，我建议您使用jquery（）之类的帮助程序库来获得更好的生活，但如果您更喜欢纯javascript将事件附加到动态创建的元素，您的答案是事件委派，这在本文中得到了回答：

使用jquery:

在td标签内，使用按钮或链接标签作为删除按钮
添加一个css类（class=“btn\u delete”）和一个referal属性，以保留行id（data rowid=“25”）
添加jquery代码
$（document）.on（'click'，'.btn_delete'，function（）{var rowid=$（this）.data（'rowid'）；//执行其他操作…}）；
您可以使用html标记：

<a href="https://yourref.com">text</a>


OK-为什么不试试呢？你似乎已经写了很多JS，这并不是一个很大的延伸。谢谢！在我开始使用LIB或框架之前，我只是想先习惯JS。