21:26

Данные в красивой таблице

Иногда требуется построить динамически заполняемую таблицу для отображения некоторых данных. Это можно сделать разными способами. Внизу один из примеров такой таблицы. Красиво и элегантно. Для создания такой таблицы использован инструментарий Google.

Приводим код, с помощью которого была получена таблица. Вы может легко настроить его под ваши потребности.

<script type="text/javascript" src="//www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load('visualization', '1', {packages: ['table']});
 </script>
 <script type="text/javascript">
 function drawVisualization() {
 // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
 ['Имя', 'Рост', 'Курение'],
 ['Вася Пупкин', 174, true],
 ['Иван Иванович', 182, false],
 ['Юрий Петров', 186, true]
 ]);
 
 // Create and draw the visualization.
 visualization = new google.visualization.Table(document.getElementById('table'));
 visualization.draw(data, null);
 }
 google.setOnLoadCallback(drawVisualization);
 </script>
 <div id="table"></div>

А вот теперь расскажем еще об одной хитрости. После того, как скрипт сгенерирует красивую таблицу, и если вам не нужна динамическая таблица, то можно просто скопировать код таблицы прямо со страницы, на которой она отображается. Пример внизу. Грузится быстрее чем верхняя таблица.

Имя	Рост	Курение
Вася Пупкин	174	✔
Иван Иванович	182	✗
Юрий Петров	186	✔

А вот ниже приведен, собственно, сам скопированный со страницы код таблицы. Правда, не забудьте что стили будут отображаться только при наличии на странице некоторых из вышеупомянутых скриптов. Ну сами разберетесь.

<table class="google-visualization-table-table" cellspacing="0" style="width: 690px;"><tbody><tr class="google-visualization-table-tr-head"><td class="google-visualization-table-th gradient google-visualization-table-sorthdr">Имя<span class="google-visualization-table-sortind"> </span></td><td class="google-visualization-table-th gradient google-visualization-table-sorthdr">Рост<span class="google-visualization-table-sortind"> </span></td><td class="google-visualization-table-th gradient google-visualization-table-sorthdr">Курение<span class="google-visualization-table-sortind"> </span></td></tr><tr class="google-visualization-table-tr-even"><td class="google-visualization-table-td">Вася Пупкин</td><td class="google-visualization-table-td google-visualization-table-td-number">174</td><td class="google-visualization-table-td google-visualization-table-td-bool">✔</td></tr><tr class="google-visualization-table-tr-odd"><td class="google-visualization-table-td">Иван Иванович</td><td class="google-visualization-table-td google-visualization-table-td-number">182</td><td class="google-visualization-table-td google-visualization-table-td-bool">✗</td></tr><tr class="google-visualization-table-tr-even"><td class="google-visualization-table-td">Юрий Петров</td><td class="google-visualization-table-td google-visualization-table-td-number">186</td><td class="google-visualization-table-td google-visualization-table-td-bool">✔</td></tr></tbody></table>

Категория: Практика | Просмотров: 2423 | Добавил: arxweb | Теги: Таблица, вебмастер | Рейтинг: 1.0/19

Всего комментариев: 0

Новини [38]	Статті [91]
Практика [139]	Теорія [8]
Hi-tech [37]	Огляди [14]
Бізнес [0]	Акцент [0]