Html таблица на JavaScript


Доброго времени суток! В этом уроке я покажу, как генерировать html таблицу с помощью JavaScript! 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 код:

<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 параметра:
  1. row - количество строк;
  2. column - количество столбцов.
Внутри функции мы создаем локальную переменную table, в которую стразу присваиваем открывающий html тег таблицы с классом .simple-little-table. Далее идут 2 цикла - во внешнем цикле формируется строка таблицы (тег <tr>), а во внутреннем цикле столбец (тег <td>). После цикла в переменную table добавляем закрывающий тег таблицы - на этом этапе переменная содержит весь html код, который, последней строчкой, мы вставляем на страницу. Демо пример, который вы можете скачать к себе на компьютер:
Посмотреть результат Скачать
Если у вас есть вопросы по данному уроку, то можете задать их в комментариях. На этом у меня все, пока!


Раздел: Программирование

Дата последнего изменения: 2017-04-27 21:06:51

Просмотров: 14584

Читайте также:

Игра Угадай число на JavaScript!
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript
Анимация на чистом javascript

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*