onclick动态生成的表格单元格背景很难改变 [英] Difficulty changing dynamically generated table cell background onclick

问题描述

截至目前，我有一个基于动态生成的表格在行和列的用户指定的数量上这工作得很好（虽然它似乎不能在JSFiddle中工作，但我可以向你保证它确实可以在网页上工作，正如你可以在我的测试中看到的那样< a href =http://afrohorse.netau.net/pixel/ =nofollow> site ）。

现在我想完成的事情可以在这里看到小提琴
很简单，试图改变TD标签的css onclick。

我似乎无法获得该功能的工作与一个动态生成的表。

这是我目前正在尝试（ JSFiddle ）

$ b HTML： b
$ b

 行数：< input type =textid =rowcount/> 
列数：< input type =textid =columncount/> 
< input type =buttononclick =createTable（）;值=创建表/> 
< div id =box>< / div> 
  

CSS：

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

JS / jQuery：

 函数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  var row = $（'< tr>< / tr>）。attr（{
 class： [class1，class2，class3]。join（''）
}）。appendTo（mytable）; $ var $ ='; 
 for（var j = 0; j  $（'< td>< / td>'）。 
} 
 
} 
 console.log（TTTTT：+ mytable.html（））; 
 mytable.appendTo（＃box）; 
 
 
 
 $ b $（function（）{
 $（'td'）。click（function（）{
 $（ this）.toggleClass（'active'）; 
}）; 
}）; 
  

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

解决方案

是的，它不会起作用。由于整个表动态创建 ，因此它们不会附加到文档（即。， 动态创建元素的问题在于它们不是与现有元素相同的事件处理程序。） 。

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

$ $ $ $ $ $ $ $（$）$（$）$（$） ，function（）{
$（this）.toggleClass（'active'）;
}）;
}）;

JSFiddle

希望您能理解。

I'm working on making a pixel art painter, and this is beyond puzzling.

As of right now, I have a table that is being dynamically generated based on user specified amounts for "Rows" and "Columns" This works perfectly fine (Although it doesn't seem to work in JSFiddle, but I can assure you that it does indeed work on a webpage as you can see here on my test site ).

What I'm trying to accomplish now can be seen in this fiddle Pretty straight forward, trying to change "TD" tag's css onclick.

I can't seem to get that functionality working with a dynamically generated table.

Here is what I am currently trying (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');
    });
});

Any help or suggestions are greatly appreciated.

解决方案

Yes it won't work. Since the entire table are created dynamically they are not getting attached to the document (ie., The problem with dynamically created elements, is that they aren't born with the same event handlers as the existing elements. ).

So you have to go for event delegation attached to document.

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

JSFiddle

Hope you understood.

这篇关于onclick动态生成的表格单元格背景很难改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！