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 код, который, последней строчкой, мы вставляем на страницу. Демо пример, который вы можете скачать к себе на компьютер: Если у вас есть вопросы по данному уроку, то можете задать их в комментариях. На этом у меня все, пока!