Question

我正在尝试使用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>

Answer 1

这是因为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++;
        }
    }
}

Answer 2

其他人已经向您提供了为什么会发生这种情况，但我想我可能会举例说明如何更好地利用css和更近期的dom用法。

小提琴：http://jsfiddle.net/np62shu6/1/

但基本思想是定义单元格数，然后写出一系列具有20％浮点值的div。最后你有一个具有单元数据属性的国际象棋棋盘。

HTML：

<div id="game">

</div>

CSS：

.cell{
    width:20%;
    float:left;
    text-align:center;
}

.odd{
 background:#eee;   
}

JS（假设你把它放在一个加载处理程序中）：

var cells = 25;
var cell;
var h;

for(var i = 1; i <= cells; i ++)
{
    cell = $('<div>').addClass('cell').attr('data-cell', i).text(i);
    if(i % 2 == 1)
        cell.addClass('odd');

    $('#game').append(cell);
}

h = $('.cell:last-of-type').width();
$('.cell').css({height: h, lineHeight: h + 'px'});

正如其他人所说，append是一个顺序方法，所以一个接一个地调用它只会继续丢弃DOM中的东西。但是你可以创建元素，然后使用append将元素添加到这些元素，然后使用append将整个组添加到另一个元素......

我的例子没有显示这一点。我的例子只是你所写内容的替代品。我不会按你所做的那样去做。

另一个轻微的注意事项 - 国际象棋棋盘有64个单元格（8 x 8），但我把它留在了25，因为你的例子是这样做的。

Answer 3

当您使用jQuery附加标记时，它不会像将文本附加到HTML字符串那样起作用。相反，它创建了dom元素。尝试这样的事情，注意没有结束标记，并且td直接附加到最新的tr：

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 table").append("<tr>");
            for(var col = 0; col < maxCol ; col++)
             {
                 $("#board tr:last").append("<td>" + num + "</td>");
                num++;
            }
       }
}

Answer 4

＆＃13;

$(function() { //on load
    var boardSize = 5;
    printBoard(boardSize);
});
function printBoard(i_BoardSize)
{
  var maxRow = parseInt(i_BoardSize),
      maxCol = maxRow;

  var $table = $("<table oncontextmenu='return false'></table>").appendTo($("#board"));
  for(var row = 1; row <= maxRow; row++)
  { 
    var $row = $("<tr/>").appendTo($table);
    for(var col = 1; col <= maxCol; col++)
      {
        $row.append("<td>" + (row*col) + "</td>");
      }
  }
}

＆＃13;

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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> <center><h3><font size="20" color="black"> Board Game</font></h3></center></p>
<div>
    <div id="board">
        <div class="cell">
        </div>
    </div>
</div>

＆＃13;

旁注：您不必手动附加结束标记...

Answer 5

错误在于：

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--)
   {
      #here 
       $("#board").append("<tr>");
        for(var col = 0; col < maxCol ; col++)
         {
             #here
             $("#board").append("<td>" + num + "</td>");
            num++;
        }

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

您要将每个元素附加到#board，而不是正确嵌套它们。尝试将创建的元素保存在变量中，并进行嵌套：

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

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

原因：某些浏览器会立即尝试修复格式错误的HTML，并且在执行过程中，项目在插入时格式错误，并在完成后表现良好。在中间 - 这个函数的执行不是原子的 - 代码格式不正确，浏览器试图通过关闭你添加的标签来修复它。这就是为什么你需要通过嵌套 - 事先打开和关闭标签来添加元素的原因 -

Answer 6

如果您只是学习JavaScript并在DOM中工作，这会更简单，更清晰。

function makeBoardWithoutJQuery(xs, ys) {

    var table = document.createElement('table');
    var tbody = document.createElement('tbody');

    for (var y=0; y<ys; ++y) {
        var tr = document.createElement('tr');
        for (var x=0; x<xs; ++x) {
            var td = document.createElement('td');
            td.innerHTML = (y*xs) + x;
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }

    table.appendChild(tbody);
    return table;
}

如何使用JavaScript和jQuery创建板NxN

6 个答案: