使用Javascript创建表行

我是Javascript新手，了解querySelector（）、createElement（）、setAttribute和循环。 我尝试创建一个包含5个单元格的行的表

想象一下我在HTML文件中创建。我使用以下代码来执行我的想法：

// 1. select id = pixelCanvas and store in var table.
const table = document.querySelector('#pixelCanvas');

// 2. create table row element <tr></tr> and append to var table.
table.appendChild(document.createElement('tr'));

// 3. create element table data and store in var data.
const data = document.createElement('td');

// 4. set html attribute with class="cell", width: 20px & height: 20px for table data
data.setAttribute('style', 'width: 20px; height: 20px:');

// 5. use for loop and appendChild() to append 5 <td></td> to <tr></tr>
for (i = 0; i < 5; i++) {
    let tblRow = document.querySelector('tr');
    tblRow.appendChild(data);
};

//1。选择id=pixelCanvas并存储在var表中。
const table=document.querySelector（“#像素画布”）；
// 2. 创建表行元素并附加到var表。
table.appendChild（document.createElement（'tr'））；
// 3. 创建元素表数据并存储在var数据中。
const data=document.createElement（'td'）；
// 4. 使用class=“cell”设置html属性，表格数据的宽度为20px，高度为20px
setAttribute（'style'，'width:20px；height:20px:'）；
// 5. 用于循环和appendChild（）以将5追加到
对于（i=0；i<5；i++）{
设tblRow=document.querySelector（'tr'）；
tblRow.appendChild（数据）；
};

以下是HTML页面中的结果

显然，我的想法没有如预期的那样奏效。感谢你的建议：哪里出了问题？

你是说这个吗

将行移到循环外，如果您需要相同的单元格，请克隆您创建的单元格-其中也有输入错误（冒号而不是分号）

我也会把目标对准tbody，因为桌子上应该有这样的东西

const table=document.querySelector（“#像素体”）；
const data=document.createElement（'td'）；
setAttribute（'style'，'width:20px；height:20px；'）；
设tblRow=document.createElement（'tr'）；
for（设i=0；i<5；i++）{
let cell=data.cloneNode（真）
cell.textContent=i；
tblRow.appendChild（单元）；
}
表2.附件（待定）
您的代码非常接近工作状态-您只需为for循环的每次迭代创建一个单独的
td
元素，通过元素的
.style
属性设置样式属性就容易多了

另外，您可以使用
createElement
函数的返回值，而不是尝试查询刚刚创建的行-它将为您提供包含新元素的变量

请参阅此代码段：


const table=document.querySelector（“#像素画布”）；
常量颜色=[“红色”、“橙色”、“绿色”、“蓝色”、“紫色”]；
const row=document.createElement（'tr'）；
表2.追加子项（行）；
对于（i=0；i<5；i++）{
const cell=document.createElement（'td'）；
cell.style.width=“20px”；
cell.style.height=“20px”；
cell.style.backgroundColor=颜色[i]；
子行（单元格）；
};
更喜欢使用css来设置属性的样式。

还有用于表的js方法：






const myTable=document.querySelector（'表#像素画布'）
对于（让r=0；r请访问，查看和。做一些研究，搜索相关主题；如果遇到问题，请发布您的尝试，使用
[]
代码段编辑器记录输入和预期输出。非常感谢。现在我知道我必须在每个循环中创建元素并将其附加到行中。