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 код, который, последней строчкой, мы вставляем на страницу.

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

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

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

Заказать у меня разработку сайта