JS и DOM, пытаясь создать таблицу - PullRequest
Новая
       69

JS и DOM, пытаясь создать таблицу

1 голос
/ 18 июня 2020

Я пытался создать таблицу, но не могу создать td в каждом tr, td создает только в первом td, что находится в таблице, как я могу решить проблему?

// Создание 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)
}
}

Ответы [ 4 ]

2 голосов
/ 18 июня 2020

Элемент id в документе должен быть уникальным . Проблема здесь в том, что ваш document.getElementById("tr") всегда будет возвращать первый элемент, который он найдет с этим 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);
  }
}
0 голосов
/ 18 июня 2020

Я отредактировал ваш ответ и получил то, что хочу. 

    //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)  
        }
    }
}
0 голосов
/ 18 июня 2020
Атрибут

id каждого элемента в DOM должен быть уникальным. Вы устанавливаете одинаковый идентификатор для каждого создаваемого вами элемента tr. document.getElementById element всегда возвращает первое совпадение элемента по идентификатору. В этом причина проблемы. Ваш последний фрагмент кода должен быть: 

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
    }
}

tr.appendChild(td) также должен работать, если вам не нужен атрибут ID.

0 голосов
/ 18 июня 2020

Вы можете использовать это для создания таблицы: 

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);
  }
}

Вот ссылка на мой код: https://codepen.io/prabodhpanda/pen/gOPLqYe?editors=1010

...