Javascript innerHTML：按钮在表格内不起作用答案

【问题标题】：Javascript innerHTML: Button not working inside TableJavascript innerHTML：按钮在表格内不起作用
【发布时间】：2020-04-23 06:09:13
【问题描述】：

我在 innerHTML 表格中添加了一个按钮，第一行的按钮可以使用，但后面的按钮不起作用。

HTML：

<p id="stat_tbl"></p>

Javascript：

let tbl = document.getElementById("stat_tbl")

var txt = ""
txt += "<table>"
txt += "<tr><th>Name</th><th>Code</th></tr>"
for(x in obj) {
    txt += "<tr><td> + obj[x].name + </td>"
    txt += "<td><button type='' id='btnclick' onclick='tes()' value='" + obj[x].code + "'>Show Code</button></td></tr>"
}
txt += "</table>"

tbl.innerHTML = txt

我试过了：

let btn = document.createElement("button")

txt += "<td>" + btn + "</td></tr>"

tbl.appendChild(btn)

但输出是 = [object HTMLButtonElement]

【问题讨论】：

在第一个 sn-p 行中，txt += "<tr><td> + obj[x].name + </td>" 行将obj[x] 从字面上包含到字符串中，即它缺少一对引号。添加引号时，sn-p seems to work ..?

标签： javascript html innerhtml

【解决方案1】：

有一些方法可以在你的代码中解决这个问题。

基于，不是很有效，但有效的方法，其中onclick 处理程序被内联设置，您可以传递event 来处理点击。然后通过event.target引用按钮。

避免为id='btnclick'这样的元素数量设置相同的id，没有意义。

let tbl = document.getElementById("stat_tbl")
let obj = {a: {name: 'aObj', code: 'A'}, b: {name: 'bObj', code: 'B'}};
var txt = ""
txt += "<table>"
txt += "<tr><th>Name</th><th>Code</th></tr>"
for(x in obj) {
    txt += "<tr><td>" + obj[x].name + "</td>"
    txt += "<td><button type='' onclick='tes(event)' value='" + obj[x].code + "'>Show Code</button></td></tr>"
}
txt += "</table>"

tbl.innerHTML = txt

function tes(ev) {
 console.info(ev.target.value);
}

&lt;p id="stat_tbl"&gt;&lt;/p&gt;

【讨论】：

同时添加 thead/tbody 并且不建议使用内联事件处理程序
为什么不 tes(this) ？
@mplungjan，我宁愿不要放弃这个活动。如果这不是要求this 也可以使用。真的，为什么不呢。
我强烈建议像我在 my code 中所做的那样进行委派 - 在那里你得到了世界上最好的。事件和按钮以一种不显眼的方式
我应该同意，几乎（不是所有，几乎）情况下的事件委托更好，这是真的。但是，对不起，我可能建议它与这个问题无关。

【解决方案2】：

像这样改变你的 for 循环，它对我有用。

for(let x in obj) {
    txt += "<tr><td>" + obj[x].name + "</td>"
    txt += "<td><button type='' id='btnclick' onclick='tes()' value='" + obj[x].code + "'>Show Code</button></td></tr>"
}

【讨论】：

【解决方案3】：

没有任何类型（按钮或提交）的按钮就像提交按钮一样工作。由于没有表单，所以不会提交任何内容。

您可以使用其他按钮的属性。

let btn = document.createElement("button");
btn.type = 'button';
btn.onclick = tes; // the function tes() must be declared
btn.value = 'Click me';

// Better use DOM here
// txt += "<td>" + btn + "</td></tr>";

let td = document.createElement('td');
td.appendChild(btn);

let tr = document.createElement('tr');
tr.appendChild(td);

tbl.appendChild(tr);

【讨论】：

【解决方案4】：

创建有效的html
委托按钮点击

const obj = {a: {name: 'aObj', code: 'A'}, b: {name: 'bObj', code: 'B'}};
const tbl = document.getElementById("stat_tbl")
var txt = []
txt.push("<table><thead><tr><th>Name</th><th>Code</th></tr></thead><tbody>");
for (x in obj) {
  txt.push("<tr><td>" + obj[x].name + "</td>");
  txt.push("<td><button type='button' class='show' value='" + obj[x].code + "'>Show Code</button></td></tr>");
}
txt.push("</tbody></table>");

tbl.innerHTML = txt.join("");

tbl.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("show")) {
    console.log(tgt.value);
  }
});

&lt;p id="stat_tbl"&gt;&lt;/p&gt;

使用模板文字

const obj = {a: {name: 'aObj', code: 'A'}, b: {name: 'bObj', code: 'B'}};
const tbl = document.getElementById("stat_tbl")
var txt = []
txt.push(`<table><thead><tr><th>Name</th><th>Code</th></tr></thead><tbody>`);
for (x in obj) {
  txt.push(`<tr><td>${obj[x].name}</td>`);
  txt.push(`<td><button type='button' class='show' value='${obj[x].code}'>Show Code</button></td></tr>`);
}
txt.push(`</tbody></table>`);

tbl.innerHTML = txt.join("");

tbl.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("show")) {
    console.log(tgt.value);
  }
});

&lt;p id="stat_tbl"&gt;&lt;/p&gt;

【讨论】：