javascript - 在javascript创建的html元素中设置元素类

Question

我正在通过 javascript 创建一个 html 表格，但我无法为这些元素设置类名。

我想要的:单击第二列中的输入之一激活功能。例如，此函数设置 <p>颜色为红色。

我尝试了很多解决方案，但仍然没有用。

HTML:

<div id="table"></div> 
<p id="a">adasd</p>

JS:

var arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];

var table = "<table><tr><td><b>Test</b></td>";
table += "<td style='width: 50px'>RN</td>";
table += "<td style='width: 50px'>MW</td></tr>";

for (var i=0; i<arr.length; i++) {
    table += "<td>" + arr[i] + "</td>";
    table += "<td><input class='rn' style='width: 50px'></input></td>";
    table += "<td><input style='width: 50px'></input></td></tr>";
}

table += "</table>";

document.querySelectorAll('.rn').onclick = function() {change()};

function change() {
    document.getElementById("a").style.color = "red";
}
document.getElementById("table").innerHTML = table;

Answer 1

您不能使用querySelectorAll 运行onclick，这是我的简单解决方案。我刚刚添加了 onclick='change()'

var arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];

var table = "<table><tr><td><b>Test</b></td>";
table += "<td style='width: 50px'>RN</td>";
table += "<td style='width: 50px'>MW</td></tr>";

for (var i=0; i<arr.length; i++) {
    table += "<td>" + arr[i] + "</td>";
    table += "<td><input class='rn' style='width: 50px' onclick='change()' ></input></td>";
    table += "<td><input style='width: 50px'></input></td></tr>";
}

table += "</table>";


function change() {

    document.getElementById("a").style.color = "red";
}
document.getElementById("table").innerHTML = table;

<div id="table"></div> 
<p id="a">adasd</p>