Javascript innerHTML：按钮在内部不起作用 Table

Question

我在内部添加了一个按钮HTML table，第一行的按钮有效，但后面的按钮无效。

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]

Answer 1

像这样更改你的 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>"
}

Answer 2

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

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

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

Answer 3

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

基于，不是很有效，但有效的方法，其中 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);
}

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

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

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

使用模板文字

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

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

Javascript innerHTML：按钮在内部不起作用 Table

Javascript innerHTML: Button not working inside Table

html

javascript

innerhtml