javascript - 单击表格按钮即可获取动态创建的表格单元格值

Question

我正在创建有 3 列的动态表。第一列有事件名称，第二列和第三列是该事件的状态，即图像按钮。我期望当我单击状态按钮时它应该返回相应的事件名称。当我点击状态按钮时没有任何反应。

如果您能提供解决方案，那就太好了。

 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

我已经解决了你的问题。

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>