單擊表格按鈕獲取動態創建的表格單元格值

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>

Answer 2

您可以將#demo 對象保存在一個變量中，並為其附加一個事件偵聽器。 單擊時檢查事件目標是否具有附加到按鈕的類，例如 telStatus（不要將其用作 id，因為多於一行會導致多個 html 元素具有相同的 id）。 將活動名稱作為 id 或數據屬性添加到表行，只需檢查單擊的按鈕 parentNodes 即可檢索 id/data 屬性。

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