[英]Get dynamically created table cell value on click of table button
我正在创建有 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');
}
我已经解决了你的问题。
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>
您可以将#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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.