Question

我试图用javascript创建一个国际象棋游戏。我创建了一个棋盘，下一步是添加一个id和类来创建td＆＃39; s。

以下是代码：

<html>
    <head>
        <title> Play Chess! </title>
        <meta charset="utf-8">
        <link rel='stylesheet' href='css/styles.scss' type='text/css'/>
    </head>
    <body>
        <script>
            var table ='';
            var rows =8;
            var cols=8;
            for (var r = 0; r<rows;r++){
                table +='<tr>';
                    for(var c=0;c<cols;c++){
                        table+='<td>' +''+'</td>';
                    }
                table+='</tr>';
            }
            document.write("<table border=1>"+table+'</table>');
        </script>
    </body>
</html>

我知道我可以简单地使用html执行此操作，但代码太多而且我相信还有其他方法可以执行此操作。

Answer 1

这是一个使用普通JavaScript（没有jQuery）的解决方案。将脚本放在结束</body>标记之前。这不使用真正要避免的document.write。相反，HTML有一个带有id属性的空表，然后通过脚本填充。

＆＃13;

var rows =8;
var cols=8;
var table = document.getElementById('board');
for (var r = 0; r<rows; r++){
  var row = table.insertRow(-1);
  for (var c = 0; c<cols; c++){
    var cell = row.insertCell(-1);
    cell.setAttribute('id', 'abcdefgh'.charAt(c) + (rows-r));
    cell.setAttribute('class', 'cell ' + ((c+r) % 2 ? 'odd' : 'even'));
  }
}

＆＃13;

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
.cell { width: 20px; height: 20px; }
.odd { background-color: brown }
.even { background-color: pink }

＆＃13;

<table id="board"></table>

＆＃13;

作为奖励，它有棋盘改变颜色，id值从a1（左下角）到h8（右上角）

Answer 2

如果您可以通过直接在HTML文件中编写布局来解决此问题，那么您绝对应该这样做，而不是在JavaScript中动态构建它。这非常容易出错。

话虽如此，使用jQuery解决这个问题并不是很难：

var sideLength = 8;

var table = $('<table>');
$('#root').append(table);

for (var i = 0; i < sideLength; i++) {
  var row = $('<tr>');
  table.append(row);

  for (var j = 0; j < sideLength; j++) {
    row.append($('<td>'));
  }
}

td {
  border: 1px black solid;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='root'></div>

Answer 3

看一下这个例子：https://plnkr.co/edit/7r0KzqwbjGvttytpVISX?p=preview

您只需再按几下键即可添加ID的can类。你走在正确的轨道上：

  <script>
      var table ='';
      var rows =8;
      var cols=8;
      for (var r = 0; r<rows;r++){
          table +='<tr>';
              for(var c=0;c<cols;c++){
                  table+='<td id="cell'+ c +'" class="myClass">' +''+'</td>';
              }
          table+='</tr>';     
      }
      document.write("<table border=1>"+table+'</table>');
  </script>

使用javascript创建表并为每个td添加id和class

3 个答案: