gpt4 book ai didi

javascript - 如何使用 JavaScript 和 jQuery 创建 NxN 板

转载 作者:太空狗 更新时间:2023-10-29 14:10:52 25 4
gpt4 key购买 nike

我正在尝试使用 JavaScript 创建棋盘游戏(如棋盘游戏)。

当我尝试这样做时,发生了这样的事情:
enter image description here

<tr>立即关闭 </tr> , 与 <table> </table> 相同
我试图更换 append()使用 appendTo() 的方法或 add()但它没有帮助

这是我的 JavaScript 代码:

var boardSize = 5;

$(function() { //on load
printBoard(boardSize);
});

function printBoard(i_BoardSize) {
var maxRow = parseInt(i_BoardSize);
var maxCol = parseInt(i_BoardSize);
var num = 1;

$("#board").append("<table oncontextmenu=\"return false\">");
for(var row = maxRow - 1; row >= 0 ; row--) {
$("#board").append("<tr>");
for(var col = 0; col < maxCol ; col++) {
$("#board").append("<td>" + num + "</td>");
num++;
}

$("#board").append("</tr>");
}
$("#board").append("</table>");
}

CSS:

td {
width: 32px;
height: 32px;
cursor: pointer;
text-align: center;
border: 2px solid blue;
}

.redborder {
background-color: red;
color: white;
}

.blueborder {
background-color: blue;
color: white;
}

HTML:

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' type='text/css' href='css/board.css' />
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/board.js"></script>
</head>
<body>
<p> <center><h3><font size="20" color="black"> Board Game</font></h3></center></p>
<div>
<div id="board">
<div class="cell">
</div>
</div>
</div>
</body>
</html>

最佳答案

发生这种情况是因为 jQuery append()方法不支持仅关闭标签并尝试关闭标签(如果标签未在提供的参数中关闭)。要解决这个问题,您需要将 append() 结果分配给某个变量,例如:

var myTable = $("<table oncontextmenu=\"return false\"></table>").appendTo("#board");

然后将您的行附加到此 var:

var myRow = $("<tr></tr>").appendTo( myTable );

与列相同:

myRow.append("<td>" + num + "</td>");

通过使用 appendTo方法,您将能够获得新创建的元素。

所以你的最终代码应该是这样的:

var boardSize = 5;

$(function() { //on load
printBoard(boardSize);
});

function printBoard(i_BoardSize) {
var maxRow = parseInt(i_BoardSize);
var maxCol = parseInt(i_BoardSize);
var num = 1;

var myTable = $("<table oncontextmenu=\"return false\"></table>").appendTo("#board");
for (var row = maxRow - 1; row >= 0; row--) {
var myRow = $("<tr></tr>").appendTo(myTable);
for (var col = 0; col < maxCol; col++) {
myRow.append("<td>" + num + "</td>");
num++;
}
}
}

关于javascript - 如何使用 JavaScript 和 jQuery 创建 NxN 板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25999747/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com