时间戳

首页 > 解决方案 > 如何在 JS 中动态创建的表格中添加可点击的文本

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

问题描述

我有一个基于 JSON 响应的动态生成的表。该表有 3 列 - 1 表示 S.No.，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);
}

表的视觉： 在此处输入图像描述

我想在第三列（currenlty 所在Delete的位置）中添加可点击的文本，这样当我点击文本时，我可以检索其相关的 JSON 对象并提取id. 我想用普通的 JS 和 HTML 来做这件事。

标签： javascripthtmlhtml-table

解决方案

起初我建议你使用像 jquery( https://jquery.com ) 这样的辅助库来过上更好的生活，但如果你更喜欢纯 javascript 将事件附加到动态创建的元素，你的答案是事件委托，在这篇文章中得到了回答： 将事件附加到javascript中的动态元素

使用 jquery：

  1. 在 td 标签内，使用按钮或链接标签作为删除按钮
  2. 添加一个带有引用属性的 css 类（class="btn_delete") 以保留行 ID（data-rowid="25"）
  3. 添加jquery代码

$(document).on('click','.btn_delete',function(){var rowid=$(this).data('rowid');//做点别的... });

推荐阅读