Fatal编程技术网
  • javascript/
  • 如何使用JavaScript和jQuery创建board NxN

如何使用JavaScript和jQuery创建board NxN

javascript jquery html

如何使用JavaScript和jQuery创建board NxN,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试用JavaScript创建棋盘游戏（比如国际象棋棋盘游戏） 当我尝试这样做时，事情就是这样： 立即关闭了，这与 我试图用appendTo（）或add（）替换append（）方法，但没有效果 这是我的JavaScript代码： var boardSize = 5; $(function() { //on load printBoard(boardSize); }); function printBoard(i_BoardSize) { var maxRow = pa

我正在尝试用JavaScript创建棋盘游戏（比如国际象棋棋盘游戏）

当我尝试这样做时，事情就是这样：

立即关闭了
，这与

我试图用
appendTo（）
或
add（）
替换
append（）
方法，但没有效果

这是我的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>");
}
HTML:

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

<!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附加标记时，其工作方式与将文本附加到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++;
            }
       }
}

var boardSize=5；
$（函数（）{//加载时）
印刷板（板尺寸）；
});
功能打印板（i_板尺寸）
{
var maxRow=parseInt（i_BoardSize）；
var maxCol=parseInt（i_BoardSize）；
var-num=1；
$（“#董事会”）。追加（“”）；
对于（变量行=maxRow-1；行>=0；行--）
{ 
$（“#董事会表格”）。追加（“”）；
for（var col=0；col
之所以发生这种情况，是因为jQuery方法不仅支持关闭标记，而且在提供的参数中不关闭标记时尝试关闭标记。要解决此问题，您需要将
append（）
结果分配给某个变量，例如：

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

$（函数（）{//加载时
var boardSize=5；
印刷板（板尺寸）；
});
功能打印板（i_板尺寸）
{
var maxRow=parseInt（i_BoardSize），
maxCol=maxRow；
var$table=$（“”）。附录（$（“#板”）；
对于（var row=1；row而言，错误如下：


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



理由：某些浏览器将立即尝试修复畸形HTML，在执行过程中，这些项在插入时出错，并且在完成后是完好的。在中间，该函数的执行不是原子的-代码是错误的，浏览器试图通过关闭添加的标记来修复它。这就是为什么需要的原因。要通过嵌套添加元素，请事先打开和关闭标记-
其他人已经向您提供了发生这种情况的原因，但我想我可以举一个例子，说明如何更好地使用css和最近的dom

小提琴：

但基本思想是定义单元格的数量，然后写出一系列浮点值为20%的div，最后你就有了一个带有单元格数据属性的棋盘

HTML:

JS（假设您将其放置在加载处理程序中）：


var单元=25；
var细胞；
var h；

对于（var i=1；i来说，如果您只学习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;
}



没有jQuery的函数makeboard（xs，ys）{
var table=document.createElement（'table'）；
var tbody=document.createElement（'tbody'）；

对于（变量y=0；y
。追加
追加“全部”DOM元素。您可以先生成HTML，然后添加它。另请参见
和
标记似乎是HTML历史上最长的弃用标记。您使用的是样式表，请尝试在其中包含格式逻辑，而不是通过弃用的标记。此外，您的结构是错误的，
由
标记括起来。这里有文档记录。你知道，一个微妙的旁注是，你可以只附加25个div，每个div的宽度为20%，浮动，它也可以制作一块板，而不必使用表，表应该只保留为表格数据。为什么？我希望10k用户能给出更好的答案：-/@FelixKling the Faste西部的圣枪问题…我发布了一些我想到的有用的东西，后来又想改进它。然后我的互联网连接出现了问题，而且…我很确定你没有经历过必须与30-40个人共享1Mbps wifi的经历，他们甚至可以下载torrents，无论他们得到什么比特…：）您在“var myRow=”之后忘记了“$”，但在添加“$”：）之后它就可以工作了

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



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



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



<div id="game">

</div>



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

.odd{
 background:#eee;   
}



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



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