Вашата задача е "да направи дисекция" на маса. Преминете през нейните редове и клетки, премахнете нещо, добавете нещо. Елементът маса спъват, ние започваме да се използват познатите DOM-свойства и методи: firstChild, createElement, appendChild и т.н. И изведнъж се оказва, че тя работи не е така, както изглежда на пръв поглед ..
грешен подход
Има една проста таблица с идентификатор "tableId", в който искате да премахнете първия и добавяне на нов ред в края:
| ред: 1, клетка: 1 | ред: 1, клетка: 2 |
| ред: 2, клетка: 1 | ред: 2, клетка: 2 |
Ние се реши проблема с обичайните техники, изпълнявайки няма функция ():
функция не # 40; # 41; # 123;
Var маса = документ. getElementById # 40; "TableId" # 41; ;
// Преместване на първия ред на таблицата
Var TR1 = маса. firstChild;
бдителен # 40; TR1. nodeName # 41; ; // В IE и Opera ще покаже "TBODY" и Gecko - "#text"
// не работи, отидете на друг начин
VAR allRows = маса. getElementsByTagName # 40; "Тг" # 41; ;
TR1 = allRows # 91; 0 # 93; ;
// Премахване на първия ред
TR1. parentNode. removeChild # 40; TR1 # 41; ;
// Създаване на нов ред
Var TR3 = документ. createElement # 40; "Тг" # 41; ;
TR3. innerHTML = "
// Добавете го към масата
allRows = маса. getElementsByTagName # 40; "Тг" # 41; ;
TR3 = allRows # 91; 0 # 93. parentNode. appendChild # 40; TR3 # 41; ; / * Това е много интересно
В IE, линията не се показва на всички, тъй като в добавената линия са счупени клетка, без да отваряте етикет TD
В гущер добавя само елемент TR, съдържащ низ "ред: 3, клетка: 1row: 3, клетка: 2" без клетки
Само в Opera всичко работи по предназначение
* /
// презаписва добавя ред
бдителен # 40; "Кой ще се подредят отстраняване" # 41; ;
TR3. parentNode. removeChild # 40; TR3 # 41; ;
// Добавяне на факта, че ние искаме да бъдем по-правилно, чрез DOM
бдителен # 40; "Re-добавяне на ред" # 41; ;
Var td3_1 = документ. createElement # 40; "ТД" # 41; ;
td3_1. innerHTML = "ред: 3, клетка: 1";
Var td3_2 = документ. createElement # 40; "ТД" # 41; ;
td3_2. innerHTML = "ред: 3, клетка: 2";
TR3 = документ. createElement # 40; "Тг" # 41; ;
TR3. appendChild # 40; td3_1 # 41; ;
TR3. appendChild # 40; td3_2 # 41; ;
allRows = маса. getElementsByTagName # 40; "Тг" # 41; ;
TR3 = allRows # 91; 0 # 93. parentNode. appendChild # 40; TR3 # 41; ;
// УРА!
# 125;
правилното решение
Докато ние се опитваме да намерим начини да работят различни браузъри с елементите на масата за дълъг период от време, описан в Дом-2 интерфейс само за решаване на тези проблеми. По някаква причина, най-красивите момичета, които не са много материал по темата, така че по-подробно на анализа на необходимите свойства и методи:
интерфейс HTMLTableElement
- редове собственост. връща колекция от възли редове от таблицата, само за четене.
- метод deleteRow взема като аргумент индекс низ да бъде изтрита. Индексирането започва от нула.
- метод InsertRow приема като аргументи индекса на ред, пред който се вмъква нов ред. Връща референция към нов вмъкнат ред.
Също така има свойства и методи за работа с елементи врекламния, TFOOT, TBODY и надпис. но поради рядка употреба да се спра на тях няма да се детайли.
интерфейс HTMLTableRowElement
- клетките на имота. връща колекция от клетъчни възли за реда, само за четене.
- метод deleteCell счита като аргумент индекс низ клетка, която трябва да се отстрани. Индексирането започва от нула.
- метод insertCell приема като аргументи индекса на клетка, преди което се добавя нова клетка в ред. Връща референция към новия вмъкнат клетката.
интерфейс HTMLTableCellElement
- Имоти cellIndex. връща индекса на клетката в един ред (от нула) само за четене.
Нека да решим крос-браузър, използвайки свойствата на задачите и методите, изброени по-горе:
функция да # 40; # 41; # 123;
Var маса = документ. getElementById # 40; "TableId" # 41; ;
таблица. deleteRow # 40; 0 # 41; ;
Var newrow = маса. insertRow # 40; -1 # 41; ;
newrow. insertCell # 40; -1 # 41. innerHTML = "ред: 3, клетка: 1";
newrow. insertCell # 40; -1 # 41. innerHTML = "ред: 3, клетка: 2";
# 125;
Да се надяваме, описан в тази статия, интерфейсът по-лесно да се работи с масите в DOM. На добър час!
Свързани статии