Wenn Sie die Tabelle dynamisch bedienen möchten, müssen Sie mit dem DOM vertraut sein. Wenn Sie Browserkompatibilität erreichen möchten, müssen Sie mit den W3C-Standards und den Eigenschaften jedes Browsers bei Tabellenoperationen vertraut sein. Table ist heute die beste Wahl für die Datenanzeige. DOM hat speziell einige Funktionen und Methoden für Table hinzugefügt, die uns helfen, einfachere und effizientere Programme zu schreiben.
Hinweis: Das Programm in diesem Artikel wurde unter IE7 und Firefox3 getestet.
Verfahren 1: Erstellen Sie dynamisch eine Tabelle
1 ’Durch die Eingabe ist keine Zahl");
9; eine Zahl größer als 0 "); tableNode.setAttribute("class","tableStyle");
18 tableNode.setAttribute("border",1);
19
20 for(var i = 0; i < rowCount; i + +){
21 var newRow = tableNode.insertRow(0);
22 for(var j = 0; j < cellCount; j++){
23 var newCell = newRow.insertCell(0);
24 newCell 🎜>27 document.body.appendChild(tableNode);
28 }
Diese Funktion ist sehr einfach: Zeile 14 verwendet an dieser Stelle die Methode document.createElement(), um ein Table-Tag zu erstellen Wir sind auf nichts gestoßen, was unserer Aufmerksamkeit bedarf, da die meisten Browser diese Methode unterstützen. In den Zeilen 16–18 verwenden wir die Methode setAttribute(), um Attribute zum neu erstellten Tabellen-Tag hinzuzufügen. Obwohl diese Codezeilen von IE und FF analysiert werden können, weist das Buch „JavaScript Advanced Programming“ darauf hin:
IE verwendet setAttribute() Es gibt große Probleme bei der Verwendung dieses Ansatzes. Wenn Sie IE unterstützen möchten, ist es am besten, Attribute zu verwenden. Was der Master sagt, macht immer Sinn, sodass wir Attribute anstelle von Methoden verwenden können. Glücklicherweise bietet FireFox auch Unterstützung für Attribute, sodass wir das Programm wie folgt ändern können:
1 tableNode.id = "tableNode";
2 tableNode.className = "tableStyle";
3 tableNode.border = "1"; Das Einzige, was zu beachten ist, ist, dass beim Festlegen der Klasse der Tabelle className verwendet werden muss.
Die in Zeile 21 verwendete insertRow() und die in Zeile 23 verwendete insertCell() sind beides spezielle APIs, die von DOM für Table bereitgestellt werden. Die entsprechenden Methoden sind deleteRow() und deleteCell(). Bei der Verwendung dieser beiden Methoden sollten wir genau aufpassen für sie: IE stellt den Standardparameter -1 für beide Methoden bereit, FireFox stellt jedoch keine Parameter für sie bereit. Wenn also keine Parameter vorhanden sind, kann es normal unter IE ausgeführt werden, jedoch nicht unter FireFox. Daher sollten wir darauf achten, diesen beiden Methoden immer Parameter bereitzustellen. Für den Laien lässt sich die Bedeutung der Parameter dieser beiden Funktionen wie folgt erklären:
0: Neue Zeile über die vorhandene Zeile setzen ------- Immer den neuesten Zeilenindex (rowIndex) festlegen auf 0
-1: Platzieren Sie die neu erstellte Zeile unterhalb der vorhandenen Zeile -------Der Zeilenindex wird beginnend bei 0 erhöht
Sie können diesen Parameter auch manuell festlegen, jedoch wenn der eingestellte Parameter ist größer als der Zeilenindex der aktuellen Tabelle +1 ist, meldet das Programm einen Fehler. insertCell() hat eine ähnliche Bedeutung und muss nicht wiederholt werden!
Vorgehensweise 2: Fügen Sie neue Zeilen vor und nach der angegebenen Zeile ein
1 /**
2 * Füge eine neue Zeile vor oder nach dem angegebenen Zeilenindex hinzu
3 * @param {Object} Position identifiziert die Position vor und nach der eingefügten Position
4 * @param {Object} indexOfRow Zeilenindex
5*/
6 function insertNewRow(position,indexOfRow) {
7 var tableNode = document.getElementById("tableNode");
8 if(table Node == null ; (indexOfRow) > 0) {
13 //Suche die angegebene Zeile
14 nach Zeilenindex if(Number(indexOfRow - 1) <= tableNode.rows.length){
15 var tableRow = tableNode.row s[indexOfRow-1 ];
16 } else {
17 var tableRow = tableNode.rows[tableNode.rows.length-1];
18 }
19 // Zeilen über cloneNode kopieren, um neue Zeilen zu erhalten
20 var newRow = tableRow.cloneNode(true);
21 //Eine neue Zeile vor der angegebenen Zeile einfügen
22 if(position == 1){
23 tablerow.parentnode.insertbefore (newrow, tablerow);
24;
27}
28} else {
29 alert ("Bitte geben Sie eine Nummer ein, die größer als 0")
eingeben.
30 return;
31 }
32 } www.devdao.com
Programm 1 Zeilen, die in 5 Zeilen verwendet werden Es bedeutet, ein Array zurückzugeben, das alle Zeilen in der Tabelle und entsprechend Zellen enthält: ein Array, das alle enthält die Zellen in der Tabelle. Da es sich um ein Array handelt, das alle Zeilen enthält, können wir natürlich den Array-Index verwenden, um den gewünschten Wert zu erhalten.
Die in Zeile 20 verwendete Methode cloneNode() ist eine meiner Lieblings-DOM-Methoden HTML-Elemente werden tief (der Parameter ist wahr) oder flach (der Parameter ist falsch) kopiert. Bei der sogenannten tiefen Kopie wird eine Kopie des aktuellen Elements zurückgegeben, das denselben speziellen Namen wie das Originalelement hat. Wenn wir ein neues Element erstellen müssen, das mit einem vorhandenen Element identisch ist (z. B. beim Hochladen mehrerer Dateien), kann uns diese Methode dabei helfen, viel Code zu sparen. Die sogenannte flache Kopie bedeutet, dass nur das Skelett des Elements kopiert wird, ohne dass der spezifische Name des Elements kopiert wird. Die Bedeutung ist schwer auszudrücken. Sie können die Parameter der cloneNode()-Methode des obigen Programms auf false setzen Beobachte seine Wirkung.
Die in Zeile 23 verwendete Methode insertBefore() ist ebenfalls sehr einfach: Fügen Sie das angegebene Element vor dem aktuellen Element ein. Ich sehe oft Leute im Internet, die sagen, warum W3C kein insertAfter() hat Denken Sie anders darüber nach. Wenn das angegebene Element vor dem nächsten Element des aktuellen Elements eingefügt wird, wird die Methode insertAfter() implementiert, hehe! " tableNode");
7 var rowCount = tableNode.rows.length;
8
9 if(isNaN(deleteRowIndex) || parseInt(deleteRowIndex) < 1 || parseInt(deleteR owIndex) > Number( rowCount)){
10 warning("Bitte geben Sie eine Zahl größer als 0 und kleiner als „+Number(rowCount)+" ein)
11 return;
12 }
13 tableNode. deleteRow(Number(deleteRowIndex - 1));
14 } Haha, zu diesem kleinen Programm gibt es nicht viel zu sagen, aber seien Sie vorsichtig: Die übergebenen Parameter dürfen nicht größer sein als Anzahl der Zeilen in der Tabelle, sonst wird ein Fehler gemeldet!
Programm 4: Die angegebene Zelle löschen
1 /**
2 * Die angegebene Zeile löschen
3 * @param {Object} deleteRowIndex Der Index der zu löschenden Zeile
4*/
6 function deleteTheCell(indexOfRow,indexOfCell){
7 var tableNode = getElementById ("tableNode");
8 var rowNode = tableNode.rows[Number(indexOfRow - 1)];
9 rowNode.deleteCell(Number(indexOfCell-1));
10 } Verwendung von Find vorgesehen Verwenden Sie den Zeilenindex und den Spaltenindex, um die zu löschende Zelle auszuwählen, dann die Methode deleteCell() aufzurufen und dann den Code für die angegebene Spalte zu löschen. Ähnlich ist es nichts anderes, als jede Zeile der Tabelle zu durchlaufen und zu finden angegebene Spalte und anschließendes Löschen.
Die oben genannten sind JavaScript-Studiennotizen (2), die DOM zum Schreiben browserkompatibler Tabellenoperationen verwenden. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!
