Dom lucrează cu rândurile și celulele mesei.

Înainte de tine este sarcina de a "diseca" masa. Mergeți prin rânduri și celule, ștergeți ceva, adăugați ceva. După ce am atins elementul de masă, începem să folosim proprietățile și metodele obișnuite din DOM: firstChild, createElement, appendChild etc. Și dintr-o dată se dovedește că totul funcționează complet diferit decât părea la prima vedere.

Abordare greșită

Există o tabelă simplă, cu identificatorul "tableId", în care doriți să ștergeți prima și adăugați o linie nouă la sfârșit:

rând: 1, celula: 1	rând: 1, celula: 2
rând: 2, celula: 1	rând: 2, celula: 2

Rezolvim problema folosind metodele uzuale executând funcția no ():

funcția nr # 40; # 41; # 123;
var tab = document. getElementById # 40; "TABLEID" # 41; ;
// Mergeți la primul rând al tabelului
var tr1 = tabel. firstChild;
alerta # 40; TR1. nodeName # 41; ; // În IE și Opera va ieși "TBODY", iar în Gecko - "#text"
// Nu a mers, mergem într-un alt mod
var allRows = tabel. getElementsByTagName # 40; "Tr" # 41; ;
tr1 = allRows # 91; 0 # 93; ;
// Ștergeți primul rând
TR1. parentNode. removeChild # 40; TR1 # 41; ;
// Creați o nouă linie
var tr3 = document. createElement # 40; "Tr" # 41; ;
TR3. innerHTML = "rând: 3, celula: 1rând: 3, celula: 2„;
// Adăugați-o la masă
allRows = tabel. getElementsByTagName # 40; "Tr" # 41; ;
tr3 = toateRows # 91; 0 # 93;. parentNode. appendChild # 40; TR3 # 41; ; / * Aici este destul de interesant
În IE, șirul nu a fost afișat deloc, deoarece în rândul adăugat există celule rupte, fără eticheta de deschidere td
În Gecko, a fost adăugat doar elementul TR, care conține șirul "rând: 3, celulă: 1row: 3, celulă: 2" fără celule
Numai în Opera totul a funcționat așa cum a fost intenționat

* /
// suprascrie linia adăugată
alerta # 40; "Acum linia va fi ștearsă" # 41; ;
TR3. parentNode. removeChild # 40; TR3 # 41; ;
// Adăugați ceea ce dorim mai corect, prin DOM
alerta # 40; "Re-adăugarea unei linii" # 41; ;
var td3_1 = document. createElement # 40; "Td" # 41; ;
td3_1. innerHTML = "rândul: 3, celula: 1";
var td3_2 = document. createElement # 40; "Td" # 41; ;
td3_2. innerHTML = "rândul: 3, celula: 2";
tr3 = document. createElement # 40; "Tr" # 41; ;
TR3. appendChild # 40; td3_1 # 41; ;
TR3. appendChild # 40; td3_2 # 41; ;
allRows = tabel. getElementsByTagName # 40; "Tr" # 41; ;
tr3 = toateRows # 91; 0 # 93;. parentNode. appendChild # 40; TR3 # 41; ;
// HURRY!
# 125;

Decizia corectă

În timp ce încercăm să găsim modalități de browser încrucișat cu elemente de tabelă, DOM2 a descris mult timp o interfață convenabilă doar pentru rezolvarea unor astfel de probleme. Din anumite motive, rulați, nu foarte multe materiale pe această temă, deci vom analiza mai detaliat analiza proprietăților și metodelor necesare:

Interfață HTMLTableElement

Proprietatea rândurilor. returnează o colecție de noduri de rând tabel, readonly.
Metoda deleteRow are ca argument argumentul șirului de șters. Indexarea începe de la zero.
Metoda insertRow ia ca parametru indicele șirului înaintea căruia este introdusă noua linie. Returnează o referință la un nou șir inserat.

De asemenea, există proprietăți și metode de lucru cu elementele THEAD, TFOOT, TBODY și CAPTION. dar din cauza folosirii rare, nu vom mai vorbi despre ele în detaliu.

Interfață HTMLTableRowElement

Proprietatea celulei. returnează o colecție de noduri de celule pentru un șir, readonly.
Metoda deleteCell ia ca argument argumentul indexului celular al șirului de șters. Indexarea începe de la zero.
Metoda insertCell ia ca argument indicele celular înaintea căruia este inserată o nouă celulă din șir. Returnează o referință la o nouă celulă introdusă.

Interfață HTMLTableCellElement

Proprietatea cellIndex. returnează un index la o celulă dintr-un rând (de la zero) readonly.

Rezolvăm sarcina cross-browser cu ajutorul proprietăților și metodelor de mai sus:

funcția da # 40; # 41; # 123;
var tab = document. getElementById # 40; "TABLEID" # 41; ;
tabel. deleteRow # 40; 0 # 41; ;
var newrow = tabel. insertRow # 40; -1 # 41; ;
newrow. insertCell # 40; -1 # 41;. innerHTML = "rândul: 3, celula: 1";
newrow. insertCell # 40; -1 # 41;. innerHTML = "rândul: 3, celula: 2";
# 125;

Sper ca interfața descrisă în acest articol să vă ușureze lucrul cu mesele din DOM. Mult noroc!

Articole similare

Pagina anterioară

Pagina următoare