In der Tabelle gibt es mehrere Zeilen: var trcnt = table.rows.length; (Tabelle ist ID)
Wie viele Spalten gibt es für jede Zeile: für (var i = 0; i <trcnt; i ++)
table.rows [i] .cells.length;
JavaScript -Betriebstabelle:
Insertrow (), Deleterow (), InsertCell (), DeleteCell () -Methoden
table.insertrow () ist unter IE in Ordnung, aber in Firefox muss es in Tabelle geändert werden.insertrow (-1)
In ähnlicher Weise sollte auch die entsprechende InsertCell () in InsertCell (-1) geändert werden.
Insertrow () -Methode
Definition und Verwendung
Die Insertrow () -Methode wird verwendet, um eine neue Zeile in einer bestimmten Position in der Tabelle einzufügen.
Grammatik
tableObject.insertrow (Index)
Rückgabewert
Gibt ein Tablerow zurück, der die neu eingefügte Zeile angibt.
veranschaulichen
Diese Methode erstellt ein neues Tablerow -Objekt, repräsentiert ein neues <tr> -Tag und fügt es in die angegebene Position in der Tabelle ein.
Die neue Zeile wird vor der Indexlinie eingefügt. Wenn der Index der Anzahl der Zeilen in der Tabelle entspricht, wird die neue Zeile am Ende der Tabelle angehängt.
Wenn die Tabelle leer ist, wird die neue Zeile in ein neues <tbody> -Segment eingefügt, das selbst in die Tabelle eingefügt wird.
Wegwerfen
Wenn der Parameterindex kleiner als 0 oder größer ist oder gleich der Anzahl der Zeilen in der Tabelle, wird diese Methode mit dem Code index_size_err eine Domexception -Ausnahme ausgelöst.
Beispiel
Die Codekopie lautet wie folgt:
<html>
<kopf>
<script type = "text/javaScript">
Funktion Insrow ()
{
document.getElementById ('mytable'). Insertrow (0)
}
< /script>
< /head>
<body>
<table id = "mytable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
< /tr>
<tr>
<td> row2 cell1 </td>
<td> row2 cell2 </td>
< /tr>
< /table>
<br />
<input type = "button" onclick = "Insrow ()" "
value = "Neue Zeile einfügen">
< /body>
< /html>
deletecell ()
Definition und Verwendung
Die Methode von DeleteCell () wird verwendet, um Zellen (<TD> -Elemente) in einer Tabellenzeile zu löschen.
Grammatik
tablerowObject.DeletEcell (Index)
veranschaulichen
Der Parameterindex ist die Position des Tabellenelements, das in der Zeile gelöscht werden soll.
Diese Methode löscht die Tabellenelemente an der angegebenen Position in der Tabellenzeile.
Wegwerfen
Wenn der Parameterindex weniger als 0 oder größer oder gleich dem Tabellenelement in der Zeile ist, wirft diese Methode eine Domexception -Ausnahme mit dem Code index_size_err aus.
Beispiel
Die Codekopie lautet wie folgt:
<html>
<kopf>
<script type = "text/javaScript">
Funktion delrow ()
{
document.getElementById ('mytable'). Deleterow (0)
}
< /script>
< /head>
<body>
<table id = "mytable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
< /tr>
<tr>
<td> row2 cell1 </td>
<td> row2 cell2 </td>
< /tr>
< /table>
<br />
<input type = "button" onclick = "delrow ()" "
value = "Erste Zeile löschen">
< /body>
< /html>
InsertCell ()
Definition und Verwendung
Die Methode InsertCell () wird verwendet, um ein leeres <TD> -Element an der angegebenen Position einer Zeile in der HTML -Tabelle einzufügen.
Grammatik
tablerowObject.insertcell (Index)
Rückgabewert
Ein TableCell -Objekt, das ein neu erstelltes und eingefügtes <TD> -Element darstellt.
veranschaulichen
Diese Methode erstellt ein neues <TD> Element und fügt es in die angegebene Position in der Zeile ein. Die neue Zelle wird vor dem Tischelement eingefügt, das sich derzeit an der angegebenen Position im Index befindet. Wenn der Index gleich der Anzahl der Zellen in der Reihe ist, wird die neue Zelle am Ende der Zeile angehängt.
Beachten Sie, dass diese Methode nur <TD> Datentabellenelemente einfügen kann. Wenn Sie einer Zeile Header -Elemente hinzufügen müssen, müssen Sie ein <Th> -Element mit der Methode des Dokuments erstellen und einfügen.
Wegwerfen
Wenn der Parameterindex weniger als 0 oder größer oder gleich dem Tabellenelement in der Zeile ist, wirft diese Methode eine Domexception -Ausnahme mit dem Code index_size_err aus.
Beispiel
Die Codekopie lautet wie folgt:
<html>
<kopf>
<script type = "text/javaScript">
Funktion Inszell ()
{
var x = document.getElementById ('tr2'). InsertCell (0)
X.innerhtml = "John"
}
< /script>
< /head>
<body>
<tabelle>
<tr id = "tr1">
<Th> FirstName </th>
<Th> LastName </th>
< /tr>
<tr id = "tr2">
<td> Peter </td>
<td> Griffin </td>
< /tr>
< /table>
<br />
<input type = "button" onclick = "Inscell ()" value = "cell"> einfügen>
< /body>
< /html>
deletecell ()
Definition und Verwendung
Die Methode von DeleteCell () wird verwendet, um Zellen (<TD> -Elemente) in einer Tabellenzeile zu löschen.
Grammatik
tablerowObject.DeletEcell (Index)
veranschaulichen
Der Parameterindex ist die Position des Tabellenelements, das in der Zeile gelöscht werden soll.
Diese Methode löscht die Tabellenelemente an der angegebenen Position in der Tabellenzeile.
Wegwerfen
Wenn der Parameterindex weniger als 0 oder größer oder gleich dem Tabellenelement in der Zeile ist, wirft diese Methode eine Domexception -Ausnahme mit dem Code index_size_err aus.
Beispiel
Die Codekopie lautet wie folgt:
<html>
<kopf>
<script type = "text/javaScript">
Funktion delcell ()
{
document.getElementById ('tr2'). DeleteCell (0)
}
< /script>
< /head>
<body>
<tabelle>
<tr id = "tr1">
<Th> FirstName </th>
<Th> LastName </th>
< /tr>
<tr id = "tr2">
<td> Peter </td>
<td> Griffin </td>
< /tr>
< /table>
<br />
<input type = "button" onclick = "delcell ()" value = "Zelle löschen">
< /body>
< /html>
Anwendungen im Projekt:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
var trindex = 0;
// Zeile dynamisch erhöhen
UNTITION appendConvert () {
// var sel = document.getElementById ("selectConvertName");
var sel = document.getElementsByName ("selectConvertName") [0];
var className;
if (null! = sel) {
für (var i = 0; i <sel.options.length; i ++) {
if (sel.options [i] .ausgewählt)
className = sel.options [i] .Value;
}
}
// Die Daten stammen von Ajax, JSON -Formular.
convert.getConvertbean2json (KlasseName,
Funktion (Ergebnis) {
var obj = eval ('('+result+')');
var table = document.getElementById ("convertTable");
var newrow = table.insertrow (trindex+1);
newrow.insertcell (0) .innerhtml = obj.name+"<input type = 'button' value = 'delete' onclick = 'deleterow (this)'>";
newRow.insertCell (1) .InnerHtml = "<Eingabe type = 'text' name = 'convertList ["+trindex+"]. id'> <Eingabe type = 'Hidden' name = 'convertlist ["+trindex+"]. Name' '"+obj.name+"'>";
if (null! = obj.paramlist) {
var paramstr = "";
für (var i = 0; i <obj.paramlist.length; i ++) {
paramstr = paramstr+
"Parametername:"+obj.paramlist [i] .Name+
"; Parametertyp:"+obj.paramlist [i] .type+
"; Parameterwert: <Eingabename = 'ConvertList ["+trindex+"]. ParamList ["+i+"]. Wert' Typ = 'text'> <br>"+++
"<Eingabe type = 'Hidden' name = 'convertList ["+trindex+"]. paramlist ["+i+"]. name' value = '"+obj.paramlist [i] .name+"'>"+
"<Eingabe type = 'Hidden' name = 'convertList ["+trindex+"]. paramList ["+i+"]. Typ' value = '"+obj.paramlist [i] .type+"'>";
}
newrow.insertcell (2) .innerhtml = paramstr;
}
Trindex ++;
});
}
// die Zeile löschen
auf deleterow (r) {
var i = r.parentnode.parentnode.rowIndex;
document.getElementById ('convertTable'). Deleterow (i);
Trindex--;
}
</script>