Dom dolgozó sorok és táblázatcellákhoz - a cikket
Az Ön feladata az, hogy „boncolgatni” táblázatban. Menj át rajta sorok és cellák, távolítsa el valamit, hozzá valamit. A table elem megbotlott, kezdjük használni ismerős DOM-tulajdonságok és módszerek: firstChild, createElement, AppendChild stb És hirtelen kiderül, hogy ez működik, nem ez a helyzet, mint első pillantásra tűnik ..
rossz megközelítést
Van egy egyszerű táblázat azonosítójával „tableId”, amelyben el kívánja távolítani az első és egy új sort a végére:
| sor: 1, cella: 1 | sor: 1, cella: 2 |
| sor: 2, Cell: 1 | sor: 2, Cell: 2 |
Mi a probléma megoldására a szokásos módszerrel, teljesítő nincs function ():
funkció nélkül # 40; # 41; # 123;
var table = dokumentum. getElementById # 40; "TableId" # 41; ;
// mozgassa az első sorban a táblázat
var TR1 = táblázat. firstChild;
éber # 40; TR1. nodeName # 41; ; // IE és az Opera megjelenik a "TBody", és Gecko - "#text"
// Nem működik, menj a másik irányba
var allRows = táblázat. getElementsByTagName # 40; "Tr" # 41; ;
TR1 = allRows # 91; 0 # 93; ;
// Vegye ki az első sorban
TR1. parentNode. removeChild # 40; tr1 # 41; ;
// Létrehozunk egy új sort
var TR3 = dokumentumot. createElement # 40; "Tr" # 41; ;
TR3. innerHTML = "
// Hozzáadás az asztalhoz
allRows = táblázat. getElementsByTagName # 40; "Tr" # 41; ;
TR3 = allRows # 91; 0 # 93;. parentNode. AppendChild # 40; TR3 # 41; ; / * Ez nagyon érdekes
Az IE, a vonal egyáltalán nem jelennek meg, mert A hozzáadott sorban van törve, sejtfal nélkül nyitó címke td
A Gecko hozzá egyetlen elem TR, amely tartalmazza a string "sorban: 3, cella: 1row: 3, cella: 2" sejtek nélkül
Csak az Opera minden működött rendeltetésszerűen
* /
// felülírja hozzáadunk sorban
éber # 40; „Ki fog sor eltávolítása” # 41; ;
TR3. parentNode. removeChild # 40; TR3 # 41; ;
// Add, hogy azt akarjuk, hogy legyen korrekt, a DOM
éber # 40; „Re-hozzátéve egy vonal” # 41; ;
var td3_1 = dokumentumot. createElement # 40; "TD" # 41; ;
td3_1. innerHTML = "sorban: 3, cella: 1";
var td3_2 = dokumentumot. createElement # 40; "TD" # 41; ;
td3_2. innerHTML = "sorban: 3, cella: 2";
TR3 = dokumentumot. createElement # 40; "Tr" # 41; ;
TR3. AppendChild # 40; td3_1 # 41; ;
TR3. AppendChild # 40; td3_2 # 41; ;
allRows = táblázat. getElementsByTagName # 40; "Tr" # 41; ;
TR3 = allRows # 91; 0 # 93;. parentNode. AppendChild # 40; TR3 # 41; ;
// Hurrá!
# 125;
a helyes döntés
Miközben megpróbálja megtalálni a módját, hogy a munka több böngészővel az elemeket az asztal sokáig leírt DOM2 barátságos felület csak ilyen jellegű problémák megoldását. Valamilyen oknál fogva, legszebb lányok, nem sok anyag a témában, úgyhogy részletesebben az elemzés a szükséges tulajdonságok és módszerek:
interface HTMLTableElement
- Property sorok. vissza csomópontok kollekcióját táblázat sorait, csak olvasható.
- deleteRow metódus érvként egy string index törölni kell. Az indexelés a nulláról kezdi.
- InsertRow metódus paraméterként a sor indexére, amely előtt az új sor kerül beillesztésre. Hivatkozást ad egy új beillesztett sor.
Tulajdonságaik is vannak, és módszert kínál elemek thead, tfoot, TBody és felirattal. ám a gyakori használat kitérni rájuk Nem részletezzük.
interface HTMLTableRowElement
- Az ingatlan sejtekben. vissza a gyűjtemény sejt csomópontok sorok, csak olvasható.
- deleteCell metódus érvként egy string-sejt-index, amely el kell távolítani. Az indexelés a nulláról kezdi.
- insertCell metódus paraméterként a sejt-index, amely előtt az új cella a sorral egészül ki. Hivatkozást ad az új gépbe helyezett sejt.
interface HTMLTableCellElement
- Az ingatlan cellIndex. visszaadja az index a cella egy sorban (nullától) csak olvasható.
Nézzük megoldani a cross-browser segítségével a feladat tulajdonságok és módszerek a fent felsorolt:
funkció igen # 40; # 41; # 123;
var table = dokumentum. getElementById # 40; "TableId" # 41; ;
táblázatban. deleteRow # 40; 0 # 41; ;
var newrow = táblázat. insertRow # 40; -1 # 41; ;
newrow. insertCell # 40; -1 # 41;. innerHTML = "sorban: 3, cella: 1";
newrow. insertCell # 40; -1 # 41;. innerHTML = "sorban: 3, cella: 2";
# 125;
Remélhetőleg ebben a cikkben ismertetett, a felület könnyebben dolgozni a táblázatok a DOM. Sok szerencsét!