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

Реализация
Рассмотрим 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 код:
<script type="text/javascript"> function generateTable(row, column){ var table = '<table class="simple-little-table">'; for( var i = 1; i <= row; i++ ){ table += '<tr>'; for( var j = 1; j <= column; j++ ){ table += '<td>Ячейка ' + i + ':' + j + '</td>'; } table += '</tr>'; } table += '</table>'; document.getElementById('table').innerHTML = table; } </script>Здесь мы создаем функцию generateTable, которая принимаем 2 параметра:
- row - количество строк;
- column - количество столбцов.
Раздел: JavaScript с примерами
Дата последнего изменения: 2017-04-27 21:06:51
Просмотров: 11556
Оставить комментарий
* Комментарий: (отменить ответ)
* Ваше имя:
Ваш e-mail:
*