Question

我正在制作一位像素艺术画家，这太令人费解了。

到目前为止，我有一个基于用户指定的“行”和“列”数量动态生成的表这种方法非常好（虽然它似乎不适用于JSFiddle，但我可以保证你确实可以在网页上工作，你可以在我的测试中看到site）。

我现在想要完成的事情可以在fiddle中看到非常直接，试图改变“TD”标签的css onclick。

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

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

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>

CSS：

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

JS / jQuery的：

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

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

Answer 1

是的，它不起作用。由于整个table已动态创建，因此它们未附加到document（即。The problem with dynamically created elements, is that they aren't born with the same event handlers as the existing elements.）。

所以你必须去附加到文档的事件委托。

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

JSFiddle

希望你理解。

Answer 2

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

function createTable()
{
    // your code

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

添加jsfiddle链接。 http://jsfiddle.net/y94K8/4/

难以改变动态生成的表格单元格背景onclick

2 个答案:

JSFiddle