我想用 javascript 创建表格。我想询问用户表格的宽度和高度(1 个单元格是 1 个单元)。然后在创建表时，如果用户单击其中一个单元格，颜色会发生变化。我写了这么多代码，但我几乎卡住了。
HTML 代码:
<script src="script.js"></script>
<style>
#chessboard{border: 1px solid black; border-collapse: collapse}
td {width: 40px; height: 40px}
tr:nth-child(odd) td:nth-child(even) {background: black}
tr:nth-child(even) td:nth-child(odd) {background: black}
</style>
</head>
<body onload="myFunction()">
<div>
<table id="chessboard">
</table>
</div>
</body>
JavaScript:
var width = parseInt(prompt("Put width", "here"));
var height = parseInt(prompt("Put height", "here"));
function myFunction()
{
var tabel = document.getElementById("chessboard");
for (i = 0; i < height; i++){
var row = tabel.insertRow(i);
};
for (j = 0; j < width; j++){
var celica = document.getElementByTagName("tr").rows[j];
var x = celica.insertCell(j);
};
}
最佳答案
与其在行中单独遍历所需的列，不如尝试嵌套 for 循环。这要容易得多，意味着您不必笨拙地再次查找该行。
仅供引用，没有 getElementByTagName，只有 getElementsByTagName。
var width = parseInt(prompt("Put width", "here"));
var height = parseInt(prompt("Put height", "here"));
function myFunction() {
var table = document.getElementById("chessboard");
for (var i = 0; i < height; i++) {
var row = table.insertRow(i);
for (var j = 0; j < width; j++) {
row.insertCell(j);
}
};
}<head>
<script src="script.js"></script>
<style>
#chessboard {
border: 1px solid black;
border-collapse: collapse
}
td {
width: 40px;
height: 40px
}
tr:nth-child(odd) td:nth-child(even) {
background: black
}
tr:nth-child(even) td:nth-child(odd) {
background: black
}
</style>
</head>
<body onload="myFunction()">
<div>
<table id="chessboard">
</table>
</div>
</body>关于javascript - 如何使用 javascript 创建表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27796007/