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

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

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

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



Похожие публикации:

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

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>