Javascript 在JSFIDLE中工作，即使放置在文档就绪处理程序中也不能在浏览器中工作_Javascript_Jquery_Html_Css

Javascript 在JSFIDLE中工作，即使放置在文档就绪处理程序中也不能在浏览器中工作

javascript jquery html css

Javascript 在JSFIDLE中工作，即使放置在文档就绪处理程序中也不能在浏览器中工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用jQuery打印一个16x16的div网格。我设法让它在JSFIDLE上正确打印；但是，在浏览器中测试时，仅打印一行。我注意到，当我将JSFIDLE上的扩展从jQuery（edge）更改为jQuery2.1.3时，我收到的结果与将其放入浏览器时的结果相同。这是什么原因造成的我知道以前也有人问过类似的问题，但我已经仔细研究了很多不同的问题，比如我的问题，这些问题给出的答案对我没有帮助。我找到的每个答案都说使用window.onload=function（）{}，$（document）.

我正在使用jQuery打印一个16x16的div网格。我设法让它在JSFIDLE上正确打印；但是，在浏览器中测试时，仅打印一行。我注意到，当我将JSFIDLE上的扩展从jQuery（edge）更改为jQuery2.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");
});

我会将js更改为将（col）

td

附加到（table）

contain

的最后一行

tr

$square=$（''）；
$（文档）.ready（函数（）{
对于（var i=1；i只需尝试在…JS code…
标记中的body中添加您的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>


游戏
#包含
{
宽度：100%；
}
广场
{
高度：20px；
宽度：20px；
背景色：黑色；
边框：实心1px黑色；
显示：块；
}
$square=$（''）；
$（文档）.ready（函数（）{
对于（var i=1；i又是什么问题？是JavaScript代码中的错误，还是您希望它在您的计算机上运行，而不是在Fiddle中运行。问题是它在Fiddle中工作，但在浏览器中运行时不工作。我非常希望它在浏览器中工作。您将td
元素直接添加到表中
？您是怎么做的ping的结果是？这样做真的没有意义。你的意思是要将它们附加到你创建的新的空tr
元素中吗？JSFIDLE在哪里工作？…然后你将td
附加到td。所有这些对元素的语义都没有意义。我只是尝试了一下jsFiddle，它不创建16行。
#contain
{
    width:100%;
}
.square
{
    height: 20px;
    width: 20px;
    background-color: black;
    border: solid 1px black;
    display: block;
}

<!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>