Отрисовка html-вёрстки средствами JavaScript


Сейчас для разработки фронтенда очень часто используют всевозможные JavaScript фреймворки.
Суть их в том, что вёрстка генерируется средствами JavaScript, а не вручную прописывается разработчиком.
То есть скажем для отрисовки списка не нужно прописывать тэги li, а нужно лишь передать массив со значениями пунктов в определённую функцию и разметка будет отрисована.
Если вы не представляете как можно создать html-страницу без использования html - читайте дальше.
Я разберу данный подход на примере создания таблицы.
Таблица будет примитивная, и совсем-совсем как настоящая:)
Вначале создадим на странице контейнер, в котором будет отрисовывать таблицу:

<div id="root"></div>

Ну и сама функция:

function createTable(container, cols, rows){
    //создание таблицы
    var table = document.createElement('table');

    for(var i = 0; i < rows; i++){
        var tr = document.createElement('tr');

        for(var j = 0; j < cols; j++){
            var td = document.createElement('td');
            //добавление в строку ячейки
            tr.appendChild(td);
        }

        //добавление в таблицу строки
        table.appendChild(tr);

    }
    //добавление таблицы в родительский контейнер
    root.appendChild(table);
}

Я оставил комментарии возле ключевых строк.
Вызывать функцию следует так:

var root = document.querySelector('#root')
createTable(root, 10, 5);

В переменную root я положил указатель на контейнер.
Числа 10 и 5 - это количество столбцов и строк в таблице. ВЫ можете указать любые цифры.

Ну и чтобы таблицу можно было "посмотреть" - добавим стили:

table td{
  border:1px solid black;
  padding:10px;
}
table td:hover{
  background:red;
  cursor:pointer;
}

Усложняя данный код можно манипулировать атрибутами тэгов таблицы и т.п. Но суть остаётся прежней - при помощи JavaScript можно управлять DOM-деревом в браузере.

Посмотреть как это работает вы можете по ссылке https://codepen.io/tristamoff/pen/gKbrVG
Материал подготовлен автором @tristamoff


Comments 1


Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
t3ran13, midnight, ruslandis, tasha, tristamoff, vadbars, kotik, olga-olga, semasping, cergey-p, ladyzarulem, arystarch, osincevata, gapel, oksana0407, lenutsa, vpervye1, yurchello, amelina.elena, lushaya, graff0x, roman1, soroka, hellen-g, victorskaz, kertar, ifingramota, oksi-m, liseykina, zhenek, magformers, kr-alexey, katarinka, katherina, andrzhej, sinilga, anandasurya, borgerry, vitalist
Поэтому я тоже проголосовал за него!

Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!


Если Вы хотите отказаться от поддержки Доброго Кита, то ответьте на этот комментарий командой "!нехочу"


dobryj.kit теперь стал Делегатом! Ваш голос важен для всего сообщества!!!
Поддержите нас:

31.05.2018 08:54
0
My pageSettingsLogout
Cancel Confirm
100%
Cancel Confirm
Cancel Confirm