|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | Справочники
Главная arrow Программирование arrow Java arrow Как создать таблицу программно  

Как создать таблицу программно

Оглавление
Как создать таблицу программно
Страница 2
Страница 2 из 2

Пример 1

Далее приведен HTML-код Web-страницы, выводящей на экран таблицу — список языков программирования.

<HTML> <HEAD>

<TITLE>Языки программирования</TITLE> <SCRIPT SRC="dynamictable.js"></SCRIPT>

<!-- Предполагается, что объявление объекта DynamicTable помещено в файл сценария dynamictable.js --> </HEAD> <BODY>

<SCRIPT TYPE="text/javascript">

var JSPS_COMPILING = "Компилируемый";

var JSPS_INTERPRETING = "Интерпретируемый" ;

var tableHead = new Array();

tableHead[0] = new Array("Категория", "Язык");

var tableBody = new Array () ;

tableBody[0] = new Array(JSPS_COMPILING, "C++");

tableBody[l] = new Array(JSPS_INTERPRETING, "JavaScript");

tableBody[2] = new Array(JSPS_COMPILING, "Pascal");

tableBody[3] = new Array(JSPS_COMPILING, "Java");

tableBody[4] = new Array(JSPS_INTERPRETING, "Perl");

tableBody[5] = new Array(JSPS_COMPILING, "Delphi");

tableBody[6] = new Array(JSPS_COMPILING, "Visual Basic");

var tableObject = new DynamicTable(document.body);

tableObject.createTable(tableBody, tableHead, null,

"Языки программирования");

tableObj ect.showTable(); </SCRIPT> </BODY> </HTML>

Таким образом, мы создали простейшую таблицу, данные которой извлекаются из двух массивов: tableHead (секция "шапки") и tableBody (секция тела). Причем создали мы ее минимальными усилиями, воспользовавшись объектом DynamicTable.

Народ советует

Код, создающий массивы, на основе которых будет сформирована таблица, можно вынести в файл сценариев. Таким образом, мы получим возможность править исходные данные таблицы, не затрагивая файлы с HTML-кодом страниц.

Пример 2

Честно говоря, полученная нами в предыдущем примере таблица не очень красива. Так, лучше сделать столбец Категория вторым по счету и объединить его ячейки, содержащие одинаковый текст. Давайте перепишем приведенный ранее код, чтобы он это делал. Заодно привяжем к создаваемой таблице стиль, чтобы она выглядела приличнее.

<HTML> <HEAD>

<TITLE>Языки программирования</TITLE>

<SCRIPT SRC="dynamictable.js"x/SCRIPT>

<!-- Предполагается, что объявление объекта DynamicTable помещено в

файл сценария dynamictable.js -->

<STYLE>

.mytable { border: thin solid #CCCCCC; } .mytable TD { border: thin solid #CCCCCC; } </STYLE> </HEAD> <BODY>

<SCRIPT TYPE="text/javascript"> var tableBody = new Array(); tableBody[0] = new Array(0, "C++"); tableBody[1] = new Array(1, "JavaScript"); tableBody[2] = new Array(0, "Pascal"); tableBody[3] = new Array(0, "Java"); tableBody[4] = new Array(1, "Perl"); tableBody[5] = new Array(0, "Delphi"); tableBody[6] = new Array(0, "Visual Basic");

var tableObject = new DynamicTable(document.body, null, "mytable"); var secondColValue = -1;

function construetTable(pRowNumber, pColNumber, pSectionCode) {

switch (pSectionCode) {

case JSPS_DT_.TS_CAPTION:

return "Языки программирования"; break; case JSPS_DT_TS_HEAD:

return (pColNumber == 1) ? "Категория" : "Язык"; break; case JSPS_DT_TS_BODY: if (pColNumber ==1) { var colValue = tableBody[pRowNumber][0]; // Проверяем, не хранит ли верхняя ячейка второго // столбца то же самое значение, и, если так, // возвращаем псевдоконстанту JSPS_DT_SPANNED_VERT, // чтобы выполнить объединение ячеек по вертикали

if (secondColValue == colValue)

return JSPS_DT_SPANNED_VERT else {

secondColValue = colValue; return (colValue ==0) ? "Компилируемый" : " Интерпретируемый" ; } } else

return tableBody[pRowNumber][1] break; case JSPS_DT_TS_FOOT: return null; break; } } tableObject.createTableAdvanced(constructTable, tableBody.length, tableBody[0].length, 1); tableObject.showTable(); </SCRIPT> </B0DY> </HTML>

Здесь ДЛЯ формирования таблицы МЫ ИСПОЛЬЗОВали метод createTableAdvanced объекта DynamicTable. Это позволило нам, во-первых, изменить порядок столбцов таблицы без правки массива tableBody, во-вторых, создать секцию "шапки" таблицы без использования массива, в-третьих, выполнить объединение ячеек второго столбца, хранящих одинаковые значения. Конечно, пришлось повозиться, но результат того стоит.


« Пред. - След.

RLBN.ru - Электроника и компьютеры
0.1497
Hosted by uCoz