Question

我正在使用jQuery打印出一个16x16的div网格。我设法让它在JSFiddle上正确打印;但是，在浏览器中测试时，只打印一行。我注意到当我将JSFiddle的扩展从jQuery（edge）更改为jQuery 2.1.3时，我收到的结果与我在浏览器中输入的结果相同。造成这种情况的原因是什么？

我知道之前已经提出了类似的问题，但是我已经查看了很多不同的问题，比如我的答案，这些问题无法帮助我。我找到的每个答案都说使用window.onload = function（）{}，$（document）.ready（function（）{}），用jQuery替换$，或者更改我链接javascript的位置。我尝试了所有这四个都无济于事。也许我错过了一个回答我的人。希望有人可以让我知道我的代码在哪里出错了，或者发布一个链接到另一个有答案的问题。

的jQuery

$square = $('<td><div class = "square"></div></td>');

$(document).ready(function () {
    for (var i = 1; i <= 16; i++) {
        for (var j = 1; j <= 16; j++) {
            $("#contain").append("<td></td>");
        }
        $("#contain").append("<tr></tr>");

    }
    $square.appendTo("td");
});

HTML

<!doctype html>
<html>
    <head>
        <title>Game</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <link type="text/css" rel="stylesheet" href="gamecss.css"/>
        <script type="text/javascript" src="gamejs.js"></script>
    </head>
    <body>
        <table id = "contain"></table>
    </body>
</html>

CSS

#contain
{
    width:100%;
}
.square
{
    height: 20px;
    width: 20px;
    background-color: black;
    border: solid 1px black;
    display: block;
}

Answer 1

我会更改js以将（col）td追加到（table）tr的最后一行（{1}}。

contain

$square = $('<td><div class = "square"></div></td>');
$(document).ready(function () {
    for (var i = 1; i <= 16; i++) {
        for (var j = 1; j <= 16; j++) {
            $("#contain tr").last().append("<td></td>");
        }
        $("#contain").append("<tr></tr>");

    }
    
    $square.appendTo("td");
});

#contain
{
    width:100%;
}
.square
{
    height: 20px;
    width: 20px;
    background-color: black;
    border: solid 1px black;
    display: block;
}

Answer 2

尝试在<script>....JS Code...</script>代码中添加您的JS代码。

HTML文件

<!doctype html>
<html>
    <head>
        <title>Game</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <link type="text/css" rel="stylesheet" href="gamecss.css"/>
        <script type="text/javascript" src="gamejs.js"></script>
        <style>
        #contain
        {
            width:100%;
        }
        .square
        {
            height: 20px;
            width: 20px;
            background-color: black;
            border: solid 1px black;
            display: block;
        }
        </style>
    </head>
    <body>
        <table id = "contain"></table>

        <script>
        $square = $('<td><div class = "square"></div></td>');
        $(document).ready(function () {
            for (var i = 1; i <= 16; i++) {
                for (var j = 1; j <= 16; j++) {
                    $("#contain").append("<td></td>");
                }
                $("#contain").append("<tr></tr>");

            }
            $square.appendTo("td");
        });
        </script>
    </body>
</html>

只需复制上面的代码并创建一个html文件，运行它就可以得到你想要的东西。

在JSFiddle中工作，即使放在文档就绪处理程序

2 个答案: