如何使用JavaScript和jQuery创建板NxN
E23*_*235 7 html javascript jquery
我正在尝试使用JavaScript创建棋盘游戏(如棋盘游戏).
当我试图这样做时,这就是发生的事情:
该<tr>GOT与立即关闭</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++;
}
}
}
| 归档时间： |
|
| 查看次数： |
4797 次 |
| 最近记录： |