用javascript创建表，并为每个表添加id和类

Creating table with javascript and add id and class to each td

本文关键字：添加 id 和类 javascript 创建      更新时间：2023-09-26

我试图在javascript中创建一个国际象棋游戏。我创建了一个棋盘，下一步是将id和类添加到创建的td中。

代码如下:

<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来做到这一点，但是它的代码太多了，我相信有其他的方法来做到这一点。

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

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'));
  }
}
table { 
    border-spacing: 0;
    border-collapse: collapse;
}
.cell { width: 20px; height: 20px; }
.odd { background-color: brown }
.even { background-color: pink }
<table id="board"></table>

作为奖励，它有棋盘改变颜色，id值从a1(左下)运行到h8(右上)

如果你可以通过直接在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>

相关文章：