Что такого в этом коде Javascript, что заставляет его правильно генерировать таблицу в IE?

Что такого в этом исходном коде, что заставляет его фактически генерировать таблицу в IE, а не просто ничего не делать.

        function generateATable()
        {
            tableContainer = document.getElementById("tableDiv");
            var tableElement = document.createElement("table");

            // Append the Table Element to the table 
            // container.
            tableContainer.appendChild(tableElement);

            // IE Requires a TBODY when dynamically generating 
            // tables.  (I thought this was it but apparently it isn't)
            var tbodyElement = document.createElement("tbody");

            // First we'll append the tbody.
            tableElement.appendChild(tbodyElement);

            var trElement1 = document.createElement("tr");

            // Next we'll append the first trElement to the 
            // tbody.
            tbodyElement.appendChild(trElement1);

            var aaCell = trElement1.insertCell(-1);
            var abCell = trElement1.insertCell(0);

            var textNodeAA = document.createTextNode("AA");
            var textNodeAB = document.createTextNode("AB");

            aaCell.appendChild(textNodeAA);
            abCell.appendChild(textNodeAB);

            tbodyElement.appendChild(trElement1);

            var baCell = trElement1.cells[0].cloneNode(false);
            var bbCell = trElement1.cells[1].cloneNode(false);

            var textNodeBA = document.createTextNode("BA");
            var textNodeBB = document.createTextNode("BB");

            trElement2 = trElement1.cloneNode(false);

            tbodyElement.appendChild(trElement2);

            baCell.appendChild(textNodeBA);
            bbCell.appendChild(textNodeBB);

            trElement2.appendChild(baCell);
            trElement2.appendChild(bbCell);

            tableElement.style.border = "4px solid black";

        }

Мои извинения ... это проблема с чем-то еще ... данные, которые создавали таблицу, не заполнялись, голосование поддержано для всех ... извините! ...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
411
4

Ответы 4

                    tableContainer = document.getElementById("tableDiv");
                    var tableElement = document.createElement("table");

                    // Append the Table Element to the table 
                    // container.
                    tableContainer.appendChild(tableElement);

Вот об этом. Остальное фактически заполняет таблицу.

Мы находим div в существующем HTML-документе под названием «tableDiv», а затем мы создаем элемент <table> и добавляем его в tableDiv.

Я почти уверен, что это еще не все ... поскольку вы не можете просто добавлять дочерние элементы непосредственно к <TR>, вам нужно вызвать insertCell для создания элемента «<TD>». Также мне кажется, что это требование, чтобы tbody сначала был добавлен к таблице ... но это должно быть что-то большее, чем это

leeand00 20.12.2008 00:58

Но OP делает все это.

Triptych 20.12.2008 01:04

leeand00: Код делает все, что вы говорите: он добавляет tbody к таблице, tr к tbody, вставляет ячейки, добавляет текст в эти ячейки и добавляет эти ячейки в tr. Вот что имеет в виду Юлий, когда говорит: «Вот и все. Остальное фактически заполняет таблицу ».

Grant Wagner 20.12.2008 01:04

Что ж, я рад, что не ответил на этот вопрос, если ОП просто голосует против каждого ответа, который он мистически не считает правильным ...

annakata 20.12.2008 01:10
document.createElement("table")
  ...
tableContainer.appendChild(tableElement);

Это добавляет элемент в DOM.

Неа, просто создает элемент в памяти. Чтобы разместить его на странице, вам нужно будет добавить его к другому элементу, уже находящемуся на странице, или выполнить document.write.

Triptych 20.12.2008 00:54

придирки - он указывает, что createElement и appendChild, что имеет значение

annakata 20.12.2008 01:11

Создание таблицы, которую можно увидеть на странице, состоит из двух шагов - создание узла таблицы:

var tableElement = document.createElement("table");

… И добавив его как потомка узла, находящегося в документе:

tableContainer = document.getElementById("tableDiv");
tableContainer.appendChild(tableElement);

Я не уверен, почему вы голосуете против всех, кто ответил правильно. Вам нужно построчное описание того, что делает код?

function generateATable() {
    /* obtain a reference to a div */
    tableContainer = document.getElementById("tableDiv");
    /* create a table element */
    var tableElement = document.createElement("table");

    // Append the Table Element to the table 
    // container.
    /* append the table element to the div */
    tableContainer.appendChild(tableElement);

    // IE Requires a TBODY when dynamically generating 
    // tables.  (I thought this was it but apparently it isn't)
    /* create a tbody element */
    var tbodyElement = document.createElement("tbody");

    // First we'll append the tbody.
    /* append the tbody element to the table element */
    tableElement.appendChild(tbodyElement);

    /* create a row element */
    var trElement1 = document.createElement("tr");

    // Next we'll append the first trElement to the 
    // tbody.
    /* append the row element to the tbody element */
    tbodyElement.appendChild(trElement1);

    /* insert two cells */
    var aaCell = trElement1.insertCell(-1);
    var abCell = trElement1.insertCell(0);

    /* create two text nodes */
    var textNodeAA = document.createTextNode("AA");
    var textNodeAB = document.createTextNode("AB");

    /* append the text nodes to the cells */
    aaCell.appendChild(textNodeAA);
    abCell.appendChild(textNodeAB);

    /* append the row element to the tbody element ... again */
    tbodyElement.appendChild(trElement1);

    /* create two new cells that are shallow copies of the two cells above */
    var baCell = trElement1.cells[0].cloneNode(false);
    var bbCell = trElement1.cells[1].cloneNode(false);

    /* create two more text nodes */
    var textNodeBA = document.createTextNode("BA");
    var textNodeBB = document.createTextNode("BB");

    /* create a row element that is a shallow copy of the first row */
    trElement2 = trElement1.cloneNode(false);

    /* append the 2nd row element to the tbody element */
    tbodyElement.appendChild(trElement2);

    /* append the text nodes to the cells */
    baCell.appendChild(textNodeBA);
    bbCell.appendChild(textNodeBB);

    /* append the cells to the 2nd row element */
    trElement2.appendChild(baCell);
    trElement2.appendChild(bbCell);

    /* set the border style of the table element */
    tableElement.style.border = "4px solid black";
}

как бороться с таким поведением? сам вопрос не заслуживает ни отрицательной оценки, ни оскорбления ...

annakata 20.12.2008 01:15

Другие вопросы по теме