insertRow()-Methode
Definition und Verwendung
Mit der Methode insertRow() wird eine neue Zeile an der angegebenen Position in der Tabelle eingefügt.
Grammatik
tableObject.insertRow(index)
Rückgabewert
Gibt eine TableRow zurück, die die neu eingefügte Zeile darstellt.
veranschaulichen
Diese Methode erstellt ein neues TableRow-Objekt, das ein neues <tr>-Tag darstellt, und fügt es an der angegebenen Position in die Tabelle ein.
Die neue Zeile wird vor der Zeile am Index eingefügt. Wenn der Index gleich der Anzahl der Zeilen in der Tabelle ist, wird die neue Zeile am Ende der Tabelle angehängt.
Wenn die Tabelle leer ist, wird die neue Zeile in einen neuen <tbody>-Abschnitt eingefügt, der wiederum in die Tabelle eingefügt wird.
Werfen
Wenn der Parameterindex kleiner als 0 oder größer oder gleich der Anzahl der Zeilen in der Tabelle ist, löst diese Methode eine DOMException-Ausnahme mit dem Code INDEX_SIZE_ERR aus.
Beispiel
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<script type="text/javascript">
Funktion insRow()
{
document.getElementById('myTable').insertRow(0)
}
</script>
</head>
<Körper>
<table id="myTable">
<tr>
<td>Zeile1 Zelle1</td>
<td>Zeile1 Zelle2</td>
</tr>
<tr>
<td>Zeile2 Zelle1</td>
<td>Zeile2 Zelle2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()"
value="Neue Zeile einfügen">
</body>
</html>
deleteCell()
Definition und Verwendung
Mit der Methode deleteCell() wird eine Zelle (<td>-Element) in einer Tabellenzeile gelöscht.
Grammatik
tablerowObject.deleteCell(index)
veranschaulichen
Der Parameterindex ist die Position in der Zeile des zu löschenden Tabellenelements.
Diese Methode löscht das Tabellenelement an der angegebenen Position in der Tabellenzeile.
Werfen
Wenn der Parameterindex kleiner als 0 oder größer oder gleich der Anzahl der Tabellenelemente in der Zeile ist, löst diese Methode eine DOMException-Ausnahme mit dem Code INDEX_SIZE_ERR aus.
Beispiel
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<script type="text/javascript">
functiondelRow()
{
document.getElementById('myTable').deleteRow(0)
}
</script>
</head>
<Körper>
<table id="myTable">
<tr>
<td>Zeile1 Zelle1</td>
<td>Zeile1 Zelle2</td>
</tr>
<tr>
<td>Zeile2 Zelle1</td>
<td>Zeile2 Zelle2</td>
</tr>
</table>
<br />
<input type="button" onclick="delRow()"
value="Erste Zeile löschen">
</body>
</html>
insertCell()
Definition und Verwendung
Mit der Methode insertCell() wird ein leeres <td>-Element an einer angegebenen Position in einer Zeile einer HTML-Tabelle eingefügt.
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 an der angegebenen Position in die Zeile ein. Die neue Zelle wird vor der Zelle eingefügt, die sich derzeit an der durch den Index angegebenen Position befindet. Wenn der Index gleich der Anzahl der Zellen in der Zeile ist, wird die neue Zelle am Ende der Zeile angehängt.
Bitte beachten Sie, dass diese Methode nur <td>-Datentabellenelemente einfügen kann. Wenn Sie einer Zeile ein Header-Element hinzufügen müssen, müssen Sie ein <th>-Element mit der Methode Document.createElement() und der Methode Node.insertBefore() (oder verwandten Methoden) erstellen und einfügen.
Werfen
Wenn der Parameterindex kleiner als 0 oder größer oder gleich der Anzahl der Tabellenelemente in der Zeile ist, löst diese Methode eine DOMException-Ausnahme mit dem Code INDEX_SIZE_ERR aus.
Beispiel
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<script type="text/javascript">
Funktion insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="John"
}
</script>
</head>
<Körper>
<Tabelle>
<tr id="tr1">
<th>Vorname</th>
<th>Nachname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="insCell()" value="Zelle einfügen">
</body>
</html>
deleteCell()
Definition und Verwendung
Mit der Methode deleteCell() wird eine Zelle (<td>-Element) in einer Tabellenzeile gelöscht.
Grammatik
tablerowObject.deleteCell(index)
veranschaulichen
Der Parameterindex ist die Position in der Zeile des zu löschenden Tabellenelements.
Diese Methode löscht das Tabellenelement an der angegebenen Position in der Tabellenzeile.
Werfen
Wenn der Parameterindex kleiner als 0 oder größer oder gleich der Anzahl der Tabellenelemente in der Zeile ist, löst diese Methode eine DOMException-Ausnahme mit dem Code INDEX_SIZE_ERR aus.
Beispiel
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<script type="text/javascript">
functiondelCell()
{
document.getElementById('tr2').deleteCell(0)
}
</script>
</head>
<Körper>
<Tabelle>
<tr id="tr1">
<th>Vorname</th>
<th>Nachname</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>
Bewerbungen im Projekt:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
vartrIndex = 0;
//Zeilen dynamisch hinzufügen
unction appendConvert(){
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
var Klassenname;
if(null!=sel){
for(var i = 0; i < sel.options.length; i++){
if(sel.options[i].selected)
className=sel.options[i].value;
}
}
//Daten stammen aus dem Ajax- und JSON-Format.
konvertieren.getConvertBean2Json(className,
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 = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name ' value='"+obj.name+"'>";
if(null!=obj.paramList){
var paramStr = "";
for(var i = 0; i < obj.paramList.length; i++){
paramStr = paramStr+
„Parametername:“+obj.paramList[i].name+
";Parametertyp:"+obj.paramList[i].type+
"; Parameterwert: <input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
}
newRow.insertCell(2).innerHTML = paramStr;
}
trIndex++;
});
}
//Zeile löschen
auf deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}
</script>