发出动态生成表

Issue dynamically generating table

本文关键字：动态      更新时间：2023-09-26

我正在使用jquery制作一个表，其中瓷砖的id是使用嵌套的FOR循环生成的。我试图添加和事件监听器的瓷砖，使用他们的id，所以我可以运行一个函数时，单击他们。但是，存储在变量boatStatusClient中的id不能被识别，并抛出错误。有人能看出问题所在吗?

for (y_client = 1; y_client < 11; y_client++) {
    battlefield_client += "<tr>";
    for (x_client = 1; x_client < 11; x_client++) {
        battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>     </pre></td>";
        boatStatusClient = document.getElementById('cell_client_' + x_client + "_" + y_client);
        console.log(boatStatusClient);
        boatStatusClient.addEventListener("click", function(){boatGrid.placeBoat_client()});
    }
    battlefield_client += "</tr>";
}
$(document).ready(function() {
    $("#tableGrid_client").html(battlefield_client); //loads table

看起来您试图找到一个DOM中不存在的document.getElementById()元素。

首先将其附加到页面，然后搜索并添加相关的事件侦听器。

但是，你真的应该考虑用文档来做。createElement(或jQuery对象)，而不是连接字符串。

看，你的事件函数是在创建DOM元素之前执行的!

试试这个:

for (y_client = 1; y_client < 11; y_client++) {
    battlefield_client += "<tr>";
    for (x_client = 1; x_client < 11; x_client++) {
        battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>     </pre></td>";
    }
    battlefield_client += "</tr>";
}
$(document).ready(function() {
    $("#tableGrid_client").html(battlefield_client); //loads table
    $('.tile').click(function() {
        boatGrid.placeBoat_client();
    });
});

正如前面提到的，您试图到达一个尚未在DOM中的元素，因此无法获得它。

battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>     </pre></td>";

只创建一个包含this的字符串，但永远不会将它插入dom中——至少在尝试获取实际元素之前不会。

所以你要做的是:将这个字符串附加到view/dom:-)然后你应该可以用上面的方法得到它。

除此之外，我会考虑更好地放置引号，而不是混合使用单引号和双引号。我的建议是在编写JavaScript时总是使用单引号，而在编写html时总是使用双引号。
相关文章：