JS 和 DOM，正在尝试创建 table

Question

我尝试创建 table 但我无法在每个 tr 中创建 td，td 仅在第一个 td 中创建 table 中的内容，我该如何解决该问题？

// 创建div

var main = document.createElement("div")
main.innerHTML = ""
document.body.appendChild(main)
main.setAttribute("id", "main")

//创建图标

var puzzleico = document.createElement("div")
puzzleico.innerHTML = ""
document.getElementById("main").appendChild(puzzleico)
puzzleico.setAttribute("id", "puzzleico")
var puzzleico = document.getElementById("puzzleico").onclick = function() {createtable()};

//创建tr和td

function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")

for (var i = 0; i < 50; i++) {
    var tr = document.createElement("tr")
    tr.innerHTML = ""
    document.getElementById("table").appendChild(tr)
    tr.setAttribute("id", "tr")
    var td = document.createElement("td")
    td.innerHTML = ""
    document.getElementById("tr").appendChild(td)
}
}

Answer 1

元素 id 在文档 need to be unique 中。这里的问题是您的 document.getElementById("tr") 将始终 return 它找到的第一个元素 id 因此，您的所有 <td> 元素将附加到第一个 <tr>.

为了修复它，您可以删除 tr.setAttribute("id", "tr") 行并使用已经存在的 tr 变量将 td 子项附加到。

function createtable() {
  //Creating Table
  var table = document.createElement("table")
  table.innerHTML = ""
  document.body.appendChild(table)
  table.setAttribute("id", "table")

  for (var i = 0; i < 50; i++) {
    var tr = document.createElement("tr")
    tr.innerHTML = ""
    document.getElementById("table").appendChild(tr);
    var td = document.createElement("td");
    td.innerHTML = "test"
    tr.appendChild(td)
  }
}
createtable();

上面的代码可以工作，但是使用已经声明的变量而不是再次查找它们也可以应用于 table 的情况。此外，table.innerHTML = "" 不会添加任何值，因为当您创建新元素时 innerHTML 已经为空。

function createtable() {
  //Creating Table
  var table = document.createElement("table");
  document.body.appendChild(table);

  for (var i = 0; i < 50; i++) {
    var tr = document.createElement("tr");
    table.appendChild(tr);

    var td = document.createElement("td");
    td.innerHTML = "test";
    tr.appendChild(td);
  }
}

Answer 2

您可以使用它来创建 table:

function createTable(){
  //Creating And Appending Child
  let table = document.createElement('table');
  document.body.appendChild(table);

  for(let i = 0; i < 50; i++){
    let tr = document.createElement('tr');
    let td = document.createElement('td');
    td.innerHTML = i;
    tr.appendChild(td);
    table.appendChild(tr);
  }
}

这是我的代码笔的 link： https://codepen.io/prabodhpanda/pen/gOPLqYe?editors=1010

Answer 3

DOM中每个元素的id属性应该是唯一的。您为您创建的每个 tr 元素设置相同的 id。 document.getElementById 元素总是 returns 第一个元素与 id 匹配。这就是问题的原因。您的最后一个代码片段应该是：

function createtable() {
    //Creating Table
    var table = document.createElement("table")
    table.innerHTML = ""
    document.body.appendChild(table)
    table.setAttribute("id", "table")

    for (var i = 0; i < 50; i++) {
        var tr = document.createElement("tr")
        tr.innerHTML = ""
        document.getElementById("table").appendChild(tr)
        tr.setAttribute("id", "tr" + i) // Check this
        var td = document.createElement("td")
        td.innerHTML = ""
        document.getElementById("tr" + i).appendChild(td) // Check this
    }
}

如果您不需要 ID 属性，

tr.appendChild(td) 也应该有效。

Answer 4

我编辑了你的答案并得到了我想要的。

    //Creating tr and td
function createtable() {
    //Creating Table
    var table = document.createElement("table")
    table.innerHTML = ""
    document.body.appendChild(table)
    table.setAttribute("id", "table")

    for (var i = 0; i < 50; i++) {
        var tr = document.createElement("tr")
        tr.innerHTML = ""
        document.getElementById("table").appendChild(tr)
        tr.setAttribute("id", "tr")
        for (var v = 0; v < 50; v++) {
            var td = document.createElement("td")
            td.innerHTML = ""
            tr.appendChild(td)  
        }
    }
}

JS 和 DOM，正在尝试创建 table

JS and DOM, trying to create table

javascript

dom

dom-events