Javascript 更改动态生成的表格单元格背景onclick时遇到困难

我正在制作一个像素艺术画师，这是令人费解的

到目前为止，我有一个根据用户指定的“行”和“列”数量动态生成的表，它工作得非常好（虽然它在JSFIDLE中似乎不起作用，但我可以向您保证，它确实可以在网页上工作，正如您在我的测试中看到的那样）

我现在想要实现的目标可以从这一点上看出来 非常简单，尝试更改“TD”标记的css onclick

我似乎无法在动态生成的表中使用该功能

以下是我目前正在尝试的（）

HTML:

Row Count:<input type="text" id="rowcount" />
Column Count:<input type="text" id="columncount" />
<input type="button" onclick="createTable();" value="Create Table" />
<div id="box"></div>

table{
    width:500px;
    height:500px;
}
td{
    padding:10px;
    margin:10px;
    border:1px solid #ccc;
}
.active {
    background-color:#aaa;
}

function createTable() {

mytable = $('<table></table>').attr({
    id: "basicTable"
});
var rows = new Number($("#rowcount").val());
var cols = new Number($("#columncount").val());
var tr = [];
for (var i = 0; i < rows; i++) {
    var row = $('<tr></tr>').attr({
        class: ["class1", "class2", "class3"].join(' ')
    }).appendTo(mytable);
    for (var j = 0; j < cols; j++) {
        $('<td></td>').text("text1").appendTo(row);
    }

}
console.log("TTTTT:" + mytable.html());
mytable.appendTo("#box");


}

$(function () {
    $('td').click(function () {
        $(this).toggleClass('active');
    });
});

JS/jQuery:

Row Count:<input type="text" id="rowcount" />
Column Count:<input type="text" id="columncount" />
<input type="button" onclick="createTable();" value="Create Table" />
<div id="box"></div>

table{
    width:500px;
    height:500px;
}
td{
    padding:10px;
    margin:10px;
    border:1px solid #ccc;
}
.active {
    background-color:#aaa;
}

function createTable() {

mytable = $('<table></table>').attr({
    id: "basicTable"
});
var rows = new Number($("#rowcount").val());
var cols = new Number($("#columncount").val());
var tr = [];
for (var i = 0; i < rows; i++) {
    var row = $('<tr></tr>').attr({
        class: ["class1", "class2", "class3"].join(' ')
    }).appendTo(mytable);
    for (var j = 0; j < cols; j++) {
        $('<td></td>').text("text1").appendTo(row);
    }

}
console.log("TTTTT:" + mytable.html());
mytable.appendTo("#box");


}

$(function () {
    $('td').click(function () {
        $(this).toggleClass('active');
    });
});

函数createTable（）{
mytable=$（''）.attr({
id:“基本的”
});
var行=新编号（$（“#行计数”）.val（）；
var cols=新的数字（$（“#columncount”）.val（）；
var tr=[]；
对于（变量i=0；i

---

非常感谢您的任何帮助或建议。

是的，它不会起作用。由于整个

表

是动态创建的，因此它们不会附加到

文档

（即）

所以，您必须选择附加到文档的事件委派

$(function () {
    $(document).on('click', 'td', function () {
        $(this).toggleClass('active');
    });
});

---

希望您能理解。

是的，它不起作用。由于整个

表

是动态创建的，因此它们不会附加到

文档

（即）

所以，您必须选择附加到文档的事件委派

$(function () {
    $(document).on('click', 'td', function () {
        $(this).toggleClass('active');
    });
});

---

希望您理解。

您正在绑定，请在创建“td”之前单击“td”。将'td'添加到DOM后，在createTable（）方法内单击Bind

function createTable()
{
    // your code

    $('td').click(function () 
    {
        $(this).toggleClass('active');
    });
}

添加JSIDLE链接。

---

您正在绑定，请在创建“td”之前单击“td”。将'td'添加到DOM后，在createTable（）方法内单击Bind

function createTable()
{
    // your code

    $('td').click(function () 
    {
        $(this).toggleClass('active');
    });
}

添加JSIDLE链接。

---

谢谢！这太完美了！非常感谢。这太完美了！