Как да създадете таблица програмно
Искам да създам таблица на страница и програмно от уеб скрипт. Сложно е?
Най-простият и най-ефективен е да създадете низ, съдържащ HTML кода на таблицата, и да го изведете на правилното място на страницата, като използвате метода за запис на обекта.
Ето HTML кода за страницата, която програмно показва таблицата:
Таблица, показана програмно
Ако трябва да преначертаем така създадената таблица, ще трябва да добавим към тага
Несравнимо по-отнемащо време, използвайки DOM методи и свойства. Нека да разгледаме нашите стъпки в този случай.
1. Създайте самата таблица, като използвате метода createElement на обекта документ. Единственият параметър към този метод е да се предаде низът „TABLE“ — името на тага, който създава таблицата.
2. Създайте заглавка на таблица, ако е необходимо. За да направите това, предайте метода
createEiement на обекта на документа, низът "CAPTION".
3. Създайте текстов фрагмент, който ще стане заглавието на таблицата. За да направим това, използваме метода createTextNode на обекта на документа и му предаваме желания текст като параметър.
4. Прикрепяме създадения текстов фрагмент към заглавката на таблицата. За да направим това, използваме метода appendchild на екземпляра на обекта на заглавката на таблицата и му предаваме новосъздадения текстов фрагмент като параметър.
5. Прикрепяме създадения хедър към самата таблица. За целта използваме метода appendchild на екземпляра на обекта - таблицата и му предаваме новосъздадения екземпляр на обект - заглавието като параметър.
6. Създайте раздел на таблица. За да направите това, методът createEiementна обекта на документа, трябва да подадете низ, съответстващ на името на тага, с който е създаден този раздел ("THEAD", "TBODY" или "TFOOT").
7. Прикрепете секцията към таблицата, като използвате метода appendchild на екземпляра на обекта таблица. Като параметър ще предадем на този метод новосъздадената инстанция на обекта - секцията таблица.
8. Създайте ред за този раздел на таблицата. Параметърът на метода createEiement на обекта на документа е низът "TR".
9. Прикрепяме ред към раздела на таблицата, използвайки метода appendchild на екземпляра на обекта раздел. Като параметър на този метод ще предадем новосъздадената инстанция на обекта - низ.
10. Създайте клетка за този раздел на таблицата. Параметърът на метода createEiement на обекта на документа е низът "TD" за обикновена клетка или "TH" за заглавна клетка.
11. Прикрепяме клетката към реда с помощта на метода appendchild на обектната инстанция - реда. Като параметър на този метод ще предадем новосъздадената инстанция на обекта – клетка.
12. Създайте съдържанието на клетката. Това може да бъде йерархия на тагове или обикновен текстов фрагмент.
13. Прикрепете съдържанието на клетката към самата клетка като нейно съдържание. За да направим това, извикваме метода appendchild на екземпляра на клетъчния обект с параметър, съответстващ на създаденото съдържание на тази клетка (фрагмент от текст или таг, който създава това съдържание).
14. Ако това не е последната клетка в реда, преминете към стъпка 10.
15. Ако това не е последният ред на раздела на таблицата, преминете към стъпка 8.
16. Ако това не е последният раздел на таблицата, преминете към стъпка 6.
17. Прикрепяме напълно създадената таблица към тялото на страницата. За да направите това, трябва да извикате метода appendchild на екземпляр на обект - тялото на страницата и да му предадете екземпляр на обект - таблицата, която създадохме.
Ако ниеАко искаме да създадем таблица единствено с помощта на DOM, най-добре е изрично да създадем всички нейни секции (поне секцията за тялото на таблицата). Това ще гарантира, че всички свойства на DOM за достъп до елементите на таблицата, описани по-горе, ще работят правилно.
Да, начинът за създаване на таблица с DOM методи и свойства е много сложен. Но това е единственият начин, който ни позволява по-късно да променим програмно съдържанието на таблицата, без да презареждаме страницата.
Нека пренапишем предишния пример за страница, която показва таблица, използвайки само DOM средства.
Таблица, показана програмно
Използване на общия обект DynamicTable (листинг 8.1). Функцията конструктор на този обект има много прост формат на извикване:
Първият, единственият задължителен, параметър указва елемента на страницата, в който ще се показва таблицата и чий дъщерен ще стане.
Вторият незадължителен параметър на конструктора е името на таблицата, която ще бъде създадена. Това име се предава като низ. Ако не е посочено, името на таблицата ще бъде генерирано от самия обект DynamicTable.
Третият, също незадължителен, параметър е името на стиловия клас, който ще бъде прикачен към създадената таблица. Това име се предава като низ. Ако не е посочено, към таблицата няма да бъде прикачен стилов клас.
Методът createTable на обекта DynamicTable генерира таблица на базата на трите масива, предадени му като параметри, съхранява я в паметта на компютъра, но не я показва на екрана. Ето формата за извикване на този метод:
Трите масива, предадени на този метод, дефинират съответно съдържанието на основните, горните и долните части на таблицата. Ако някой от тези масиви не е посочен или вместо това е предадено null, този дял в таблицата не е създаден.ще. Можете също да посочите текста на заглавката на таблицата.
И трите масива, предадени на метода createTable, представляват редове в съответния раздел на създаваната таблица. Всеки елемент от такъв масив от своя страна съдържа вложен масив, който представлява клетките на даден ред от таблица. Елементите на този вложен масив могат да съдържат:
екземпляр на обекта, който ще стане съдържанието на клетката;
низът или числото, което ще стане съдържанието на клетката;
празен низ или интервал, ако искате да създадете празна клетка;
Има две от тези псевдоконстанти (стойностите им могат да се видят в листинг 8.1):
jsps_dt_spamned_horz - тази клетка ще бъде обединена с клетката, разположена вляво;
jsps_dt_spanned_vert - Тази клетка ще бъде обединена с клетката над нея.
Броят на елементите на всички вложени масиви (тези, които представляват клетки от таблица) трябва да бъде еднакъв. В противен случай ще получим съобщение за грешка и таблицата няма да бъде създадена.
Можем да изведем в таблицата не целия масив от секцията body, а част от него. За
Достатъчно е да посочите индекса на първия ред И индекса на последния ред, съответстващ на елементите от масива, които трябва да присъстват в таблицата. Не забравяйте, че индексите на елементите на масива се номерират от нула.
Ако искаме да създадем таблица въз основа на данни, които не се съхраняват никъде, но, да речем, са изчислени в уеб скрипт, тогава ще използваме метода createTableAdvanced на обекта DynamicTable. Този метод също генерира таблица в паметта, без да я показва на екрана. Ето формата на обаждането:
Функцията, която генерира съдържанието на таблицата, предадена на този метод, трябва да приема четири параметъра: номера на реда на таблицата, номера на клетката в този ред (номерирането както на редовете, така и на клетките започва сnull — не забравяйте за това!), стойност, която указва секцията на таблицата, и допълнителен параметър, указан в извикването на метода createTableAdvanced.
jsps_dt_ts_caption - надпис на таблица;
jsps_dt_ts_head - секция "глава" на таблица;
jsps_dt_ts_body - раздел на тялото на таблицата;
jsps_dt_ts_foot - долен колонтитул на таблицата.
Функцията, която генерира съдържанието на таблицата, трябва да върне стойност от един от четирите типа:
екземпляр на обекта, който ще стане съдържанието на клетката;
низът или числото, което ще стане съдържанието на клетката;
празен низ или интервал, ако искате да създадете празна клетка;
псевдоконстанта jsps_dt_spanned_horz или jsps_dt_spanned_vert (целта им беше описана по-рано).
Също така е необходимо да зададете Общ брой редове И Брой колони на таблицата. В противен случай обектът DynamicTable няма да знае какъв размер на таблицата искаме да създадем. (В случая на метода createTable броят на редовете е известен – той е равен на сумата от елементите на всички масиви. Броят на колоните също е известен – той е равен на броя на елементите на вложените масиви.) Можем също да зададем Броя редове на секцията „header“ И Броя редове на секцията „palet“, ако искаме да създадем тези секции.
И в този случай можем да покажем в таблицата (по-точно в нейната основна част) не всички подготвени данни, а част от тях. За да направите това, трябва да посочите индекса
на първия ред И Индексът на последния ред, който ТРЯБВА да присъства в таблицата.
Методът showTable на обекта DynamicTable показва таблицата в паметта на екрана. Този метод не приема параметри и не връща резултат.
Методът removeTable на обекта DynamicTable премахва таблицата от екрана и от паметта на компютъра, след което тя става недостъпна. Този метод не приема никакви параметри, невръща резултат и е полезно, ако искаме да създадем отново таблица въз основа на други данни.
Свойството id на обекта DynamicTable осигурява достъп до името на таблицата. Ще бъде полезно, ако не сме посочили името на таблицата при извикване на конструктора на този обект, а самият обект е формирал име за него.
А свойството table на обекта DynamicTable осигурява достъп до самата таблица, генерирана в паметта и евентуално вече показана от метода showTabie. Използвайки това свойство, можем да стигнем до самата таблица и нейните елементи, както и да използваме готовата таблица за други нужди (например да я поставим в клетка в друга таблица).
Листинг 8.1 Обект DynamicTable, показващ таблица
var JSPS_DT_SPANNED_HORZ = ".JSPS_DT_SPANNED_HORZ."; var JSPS_DT_SPANNED_VERT = ".JSPS_DT_SPANNED_VERT.";
var JSPS_DT_TS_CAPTION = 0; var JSPS_DT_TS_HEAD = 1; var JSPS_DT_TS_BODY = 2; var JSPS_DT_TS_FOOT =3;
функция DynamicTable(pElement, pID, pClassName)