How to add clickable text in dynamically created table in JS

Question

I have a dynamically generated table based on JSON response. The table has 3 columns - 1 for S. No., 2 for Name, and 3 is supposed to have two text links like Edit | Delete.

Edit and Delete are supposed to be clickable individually and upon clicking them I want to retrieve the respective JSON object to be able to process it further.

Example -

JSON response:

[
  {
    "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 to generate table from the above JSON data:

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);
}

Visual of the table:

I want to add clickable text in the third column (where currenlty Delete is) such that when I click on the text, I can retrieve its related JSON object and extract the id. I would like to do this in plain JS and HTML.

Answer 1

at first i suggest you using helper libraries like jquery(https://jquery.com) to have a better life but if you prefer pure javascript to attach event to dynamic created elements, your answer is event delegation which is answered in this post: Attach event to dynamic elements in javascript

With jquery:

1. inside td tag, use button or link tag as delete button
2. add a css class(class="btn_delete") with a referal attribute to keep row id(data-rowid="25")
3. add jquery code

$(document).on('click','.btn_delete',function(){var rowid=$(this).data('rowid');//do something else ... });

Answer 2

You can use a html a tag:

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