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

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

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

Игра Угадай число на JavaScript!
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Игра «Найди отличия» на JavaScript!
Игра головоломка на JavaScript!
Видео галерея на JavaScript!

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

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

* Ваше имя:

Ваш e-mail:

*