gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 03:34:24 26 4
gpt4 key购买 nike

我正在尝试用 JavaScript 创建一个国际象棋游戏。我创建了一个棋盘,下一步是向创建的 td 添加 id 和类。

代码如下:

<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 (右上角)

关于javascript - 使用javascript创建表并向每个td添加id和class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39110260/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com