JavaScript таблица - Мир WordPress

Доброго времени суток! В этом уроке я покажу, как генерировать html таблицу с помощью JavaScript!

Иногда, разрабатывая какой-либо функционал на сайте, приходится создавать html таблицы, но не всегда заранее известно, сколько в ней будет строк и сколько столбцов. Поэтому очень удобно генерировать таблицу “на лету” – делается это очень просто!

В данном уроке по JavaScript будет рассмотрена функция, которая принимает 2 параметра (количество строк и количество столбцов) и автоматически генерирует и вставляет на страницу таблицу.

Реализация

Рассмотрим html код:

        <div id="wrap">
                <div id="table"></div>
                <button onclick="generateTable(4,5)">Таблица 4 на 5</button>
                <button onclick="generateTable(7,10)">Таблица 7 на 10</button>
                <button onclick="generateTable(2,4)">Таблица 2 на 4</button>
                <button onclick="generateTable(4,15)">Таблица 4 на 15</button>
                <button onclick="generateTable(3,8)">Таблица 3 на 8</button>
        </div>

Блок с id wrap – общий блок в котором будет таблиц (после вставки) и кнопки для генерации таблиц разных размеров;
Блок с id table – в этот блок будет вставляться html код сгенерированной таблицы;
Кнопки (button) – необходимы для вызова функции.

Как видно из кода выше, вызов функции имеет вид:

generateTable(15,8)

CSS стили:

#wrap{
        width: 960px;
        margin: 0 auto;
        text-align: center;
}

Здесь я привел стили только для общего блока, но когда вы скачаете исходный файл, в нем будут стили для таблицы с классом .simple-little-table – это красивое оформление я нашел на просторах интернета.

JavaScript код:

Здесь мы создаем функцию generateTable, которая принимаем 2 параметра:

row – количество строк;
column – количество столбцов.

Внутри функции мы создаем локальную переменную table, в которую стразу присваиваем открывающий html тег таблицы с классом .simple-little-table.

Далее идут 2 цикла – во внешнем цикле формируется строка таблицы (тег <tr>), а во внутреннем цикле столбец (тег <td>).

После цикла в переменную table добавляем закрывающий тег таблицы – на этом этапе переменная содержит весь html код, который, последней строчкой, мы вставляем на страницу.

Демо пример, который вы можете скачать к себе на компьютер:

Посмотреть результат

Скачать

Если у вас есть вопросы по данному уроку, то можете задать их в комментариях.

На этом у меня все, пока!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.