Get dynamically created table cell value on click of table button

Question

I am creating dynamic table which I has 3 columns. First columns has campaign name 2nd & 3rd column is status of that campaign which is image button. What I expect when I click status button it should return respective campaign name. Nothing happens when I click on status button.

would be great if you can provide solution.

 function displayCampaigns(campaignNames) {
        var html = "<table class='table table - responsive - md' id='campaignTable'>";
        for (var i = 0; i < campaignNames.length; i++) {
            html += "<tr>";
            html += "<td>" + campaignNames[i] + "</td>";
            html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=function(){getRow(this)}/></td>";
            html += "<td><img src='ready.jpg' id='readyStatus' /></td>";
            html += "</tr>";
        }
        html += "</table>";
        document.getElementById("demo").innerHTML = html;



 function getRow(obj) {
        var txt;
        e.preventDefault();
        txt = $(this).parent().prev().prev().text();
        alert(txt + 'selected txt');
    }          

Answer 1

i have fixed your problem.

 function displayCampaigns(campaignNames) { var html = "<table class='table table - responsive - md' id='campaignTable'>"; for (var i = 0; i < campaignNames.length; i++) { html += "<tr>"; html += "<td class='parent'>" + campaignNames[i] + "</td>"; html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=getRow(this) /></td>"; html += "<td><img src='ready.jpg' id='readyStatus' /></td>"; html += "</tr>"; } html += "</table>"; document.getElementById("demo").innerHTML = html; } function getRow(event) { var txt = $(event).parent().prev().text();; alert(txt + ' selected txt'); } var a = ["test","test2"]; displayCampaigns(a);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="demo"></div>

Answer 2

You could save the #demo object in a variable and attach an event listener to that. On click check if the event target has a class that you attach to your buttons, like telStatus (don't use that as id because having more than one row will result in several html elements having the same id). Add the campaign name as id or a data attribute to the table rows and just check the clicked buttons parentNodes to retrieve the id/data attribue.

var campaignNames = [
    'abc', 'efg'
]

var demo = document.querySelector('#demo');
displayCampaigns(campaignNames);

function displayCampaigns(campaignNames) {
    var html = "<table class='table table-responsive-md' id='campaignTable'>";
    for (var i = 0; i < campaignNames.length; i++) {
        html += "<tr id='" + campaignNames[i] +"'>";
        html += "<td>" + campaignNames[i] + "</td>";
        html += "<td><input type='button' class='telStatus btn btn-success btn-circle btn-sm'/></td>";
        html += "<td><img src='ready.jpg' /></td>";
        html += "</tr>";
    }
    html += "</table>";
    demo.innerHTML = html;
}



demo.addEventListener('click', function (evt) {
    if (!evt.target.classList.contains('telStatus')) return;
    var parentTr = evt.target.parentNode.parentNode;
    var campaignName = parentTr.id;
    alert(campaignName + ' selected txt');
});