我正在为一个项目创建一个小游戏。但是我需要动态添加 9 td's ( <td>) 在每个trusing onlycreateElement和appendChild
function trFunction() {
var node = document.createElement("tr");
var no = document.createElement("td");
let tr = document.querySelector('tr')
table1.appendChild(node);
}
let body = document.querySelector('body')
let table = document.createElement("table")
body.appendChild(table)
let table1 = document.querySelector('table')
for (var i = 0; i < 9; i++) {
trFunction()
}
首先像您一样创建表：
let table = document.createElement("table")
然后使用: 将其附加到正文中document.body.appendChild(table)，无需像使用 那样再次查找表document.querySelector('table')，因为变量table已经拥有对它的引用。
使用相同的逻辑里面trFunction，创建td，然后创建tr，追加tr到td和td到table。
在下面的示例中，我使用了一些 CSS 来更好地展示它（您可以根据需要删除或设置样式）。此外，您会看到我在trFunction, 中添加了一个参数，称为number，它再次只是为了举例说明代码，如果需要，您可以删除。
查看代码片段中的注释以更好地理解它
let table = document.createElement("table") //CREATING TABLE (<table>)
document.body.appendChild(table); //ADDING TO BODY
function trFunction(number) {
var tdElem = document.createElement("td"); //CREATING <td>
let trElem = document.createElement("tr"); //CREATING <tr>
trElem.textContent = number; //JUST ADDING SOME TEXT TO tr (optional)
tdElem.appendChild(trElem); //APPENDING <tr> to <td>
table.appendChild(tdElem); //APPENDING <td> to <table>
}
for (var i = 0; i < 9; i++) {
trFunction(i)
}table{
border: 1px solid;
}
td{
border: 1px solid red;
}本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句