Javascript jQuery-标识已单击的td

我根据用户偏好在HTML文档中创建了一个网格

（表）

将

行

和

单元格

追加到表后，jQuery似乎无法正确访问它们？就好像它不把它们看作是<代码> DOM<代码>的一部分。

基本上，我将处理多维数组中的所有数据，例如：

它当前设置了名为
#row_0、#row_1等的附加行
，并且添加了
td
，但没有
ID

我需要能够将
单击的TD
映射到我的jQuery，以便对其执行一些功能和逻辑

当用户点击
td
时，是否有任何方式响应my JS，比如：

tr=[1]

td=[2]

此处找到的当前代码：

当添加
td
元素点击处理程序时，这些目标元素尚未创建，因此使用点击处理程序并将其绑定到
#board
元素，目标元素选择器为
td
，如下所示。然后使用查找行和td的位置（将1添加到索引中，因为它基于0）

演示：


另外，您的创建代码也有缺陷，jqueryappend不像字符串连接那样工作

$('#board tr').remove();
var size = parseInt($("#size").val());
for (var i = 0; i < size; i++) {
    var $tr = $('<tr />', {
        id: 'row_' + i
    }).data('index', i + 1);
    $("#board").append("<tr id='row_" + i + "'>");
    for (var j = 0; j < size; j++) {
        $('<td />', {
            id: 'col_' + j
        }).data('index', j + 1).appendTo($tr);
    }
    $("#board").append($tr);
}

$（'#board tr'）.remove（）；
var size=parseInt（$（“#size”）.val（）；
对于（变量i=0；i

演示：

这是使用您当前的代码

注意，我使用了.on-这是一个使用jquery的“实时”事件

我还修改了您对每个td的命名，将其改为col_1_2，其中1为col，2为row

        $("#row_"+i).append("<td id='col_"+j+"_"+i+"'>&nbsp;</td>");

$（“#行"+i）。追加（“”）；
这里是现场示例朋友：

这是因为在页面上插入新的动态元素时，ready jquery无法找到它。默认情况下，ready仅在加载时对现有元素运行事件。虽然有些函数（如.on）可以解决此问题。
这里是解决方案，请记住您应该绑定eventclick在创建元素时，您不应该使用通用$（'td'）。click event不起作用，因为有些元素尚未添加到DOM中

$("#go").click(function(){
    var size = $("#size").val();
    if(size<3 || size>10){
        alert("That is not a valid input. Please select 3-10");
        return;
    }

    $('#board tr').remove();

    // Check this bellow
    var size = parseInt($("#size").val()), 
    tr = $("<tr/>"), td = $("<td/>"), tdc;

    for(var i=0;i < size;i++){    
        for(var j=0;j<size;j++){
            tdc = td.clone();
            tdc.attr('id', 'col_'+j);
            tr.append(tdc);

            tdc.click(function(){
                alert(this);
            });
        }

        tr.attr('id','row_'+i);

        $("#board").append(tr);
    }
});

$（“#go”）。单击（函数（）{
变量大小=$（“#大小”）.val（）；
如果（尺寸10）{
警报（“该输入无效，请选择3-10”）；
返回；
}
$（'#board tr'）。删除（）；
//检查这个喇叭
var size=parseInt（$（“#size”）.val（）），
贸易发展局;；
对于（var i=0；i对于（var j=0；jUnrelated（可能）注意…为什么它会在我的表中显示一个闪烁的光标…？就逻辑而言，我有Javascript，但学习操作DOM仍然有点不稳定。感谢您的帮助：-）看到改进的做事方式和方法是非常有帮助的。很高兴我能提供帮助-如果你喜欢我的答案，你可以随时投票（或者如果它符合你的目的，你可以接受！）耶！祝贺兄弟！
        $("#row_"+i).append("<td id='col_"+j+"_"+i+"'>&nbsp;</td>");

$("#board").on('click', 'td', function(){
    $("#board td").css("background","white");
    $(this).css("background","red");
});

$("#go").click(function(){
    var size = $("#size").val();
    if(size<3 || size>10){
        alert("That is not a valid input. Please select 3-10");
        return;
    }

    $('#board tr').remove();

    // Check this bellow
    var size = parseInt($("#size").val()), 
    tr = $("<tr/>"), td = $("<td/>"), tdc;

    for(var i=0;i < size;i++){    
        for(var j=0;j<size;j++){
            tdc = td.clone();
            tdc.attr('id', 'col_'+j);
            tr.append(tdc);

            tdc.click(function(){
                alert(this);
            });
        }

        tr.attr('id','row_'+i);

        $("#board").append(tr);
    }
});