Méthode insertRow()
Définition et utilisation
La méthode insertRow() est utilisée pour insérer une nouvelle ligne à la position spécifiée dans le tableau.
grammaire
tableObject.insertRow(index)
valeur de retour
Renvoie un TableRow représentant la ligne nouvellement insérée.
illustrer
Cette méthode crée un nouvel objet TableRow représentant une nouvelle balise <tr> et l'insère dans le tableau à la position spécifiée.
La nouvelle ligne sera insérée avant la ligne à l'index. Si index est égal au nombre de lignes du tableau, la nouvelle ligne sera ajoutée à la fin du tableau.
Si le tableau est vide, la nouvelle ligne sera insérée dans une nouvelle section <tbody>, qui elle-même sera insérée dans le tableau.
Lancer
Si l'index du paramètre est inférieur à 0 ou supérieur ou égal au nombre de lignes de la table, cette méthode lèvera une exception DOMException avec le code INDEX_SIZE_ERR.
exemple
Copiez le code comme suit :
<html>
<tête>
<script type="text/javascript">
fonction insRow()
{
document.getElementById('myTable').insertRow(0)
}
</script>
</tête>
<corps>
<identifiant de la table="maTable">
<tr>
<td>Ligne1, cellule1</td>
<td>Ligne 1, cellule 2</td>
</tr>
<tr>
<td>Ligne 2, cellule 1</td>
<td>Ligne2, cellule2</td>
</tr>
</table>
<br />
<input type="bouton" onclick="insRow()"
value="Insérer une nouvelle ligne">
</corps>
</html>
supprimerCell()
Définition et utilisation
La méthode deleteCell() est utilisée pour supprimer une cellule (élément <td>) dans une ligne de tableau.
grammaire
tablerowObject.deleteCell(index)
illustrer
L'index du paramètre est la position dans la ligne de l'élément du tableau à supprimer.
Cette méthode supprimera l'élément du tableau à la position spécifiée dans la ligne du tableau.
Lancer
Si l'index du paramètre est inférieur à 0 ou supérieur ou égal au nombre d'éléments du tableau dans la ligne, cette méthode lèvera une exception DOMException avec le code INDEX_SIZE_ERR.
exemple
Copiez le code comme suit :
<html>
<tête>
<script type="text/javascript">
fonctiondelRow()
{
document.getElementById('myTable').deleteRow(0)
}
</script>
</tête>
<corps>
<identifiant de la table="maTable">
<tr>
<td>Ligne1, cellule1</td>
<td>Ligne 1, cellule 2</td>
</tr>
<tr>
<td>Ligne 2, cellule 1</td>
<td>Ligne2, cellule2</td>
</tr>
</table>
<br />
<input type="bouton" onclick="delRow()"
value="Supprimer la première ligne">
</corps>
</html>
insérerCell()
Définition et utilisation
La méthode insertCell() est utilisée pour insérer un élément <td> vide à une position spécifiée dans une ligne d'un tableau HTML.
grammaire
tablerowObject.insertCell(index)
valeur de retour
Un objet TableCell représentant un élément <td> nouvellement créé et inséré.
illustrer
Cette méthode crée un nouvel élément <td> et l'insère dans la ligne à la position spécifiée. La nouvelle cellule sera insérée avant la cellule actuellement située à la position spécifiée par index. Si index est égal au nombre de cellules de la ligne, la nouvelle cellule est ajoutée à la fin de la ligne.
Veuillez noter que cette méthode ne peut insérer que des éléments de table de données <td>. Si vous devez ajouter un élément d'en-tête à une ligne, vous devez créer et insérer un élément <th> à l'aide de la méthode Document.createElement() et de la méthode Node.insertBefore() (ou de méthodes associées).
Lancer
Si l'index du paramètre est inférieur à 0 ou supérieur ou égal au nombre d'éléments du tableau dans la ligne, cette méthode lèvera une exception DOMException avec le code INDEX_SIZE_ERR.
exemple
Copiez le code comme suit :
<html>
<tête>
<script type="text/javascript">
fonction insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="Jean"
}
</script>
</tête>
<corps>
<tableau>
<tr id="tr1">
<th>Prénom</th>
<th>Nom</th>
</tr>
<tr id="tr2">
<td>Pierre</td>
<td>Griffon</td>
</tr>
</table>
<br />
<input type="button" onclick="insCell()" value="Insérer une cellule">
</corps>
</html>
supprimerCell()
Définition et utilisation
La méthode deleteCell() est utilisée pour supprimer une cellule (élément <td>) dans une ligne de tableau.
grammaire
tablerowObject.deleteCell(index)
illustrer
L'index du paramètre est la position dans la ligne de l'élément du tableau à supprimer.
Cette méthode supprimera l'élément du tableau à la position spécifiée dans la ligne du tableau.
Lancer
Si l'index du paramètre est inférieur à 0 ou supérieur ou égal au nombre d'éléments du tableau dans la ligne, cette méthode lèvera une exception DOMException avec le code INDEX_SIZE_ERR.
exemple
Copiez le code comme suit :
<html>
<tête>
<script type="text/javascript">
fonctiondelCell()
{
document.getElementById('tr2').deleteCell(0)
}
</script>
</tête>
<corps>
<tableau>
<tr id="tr1">
<th>Prénom</th>
<th>Nom</th>
</tr>
<tr id="tr2">
<td>Pierre</td>
<td>Griffon</td>
</tr>
</table>
<br />
<input type="button" onclick="delCell()" value="Supprimer la cellule">
</corps>
</html>
Applications dans le projet :
Copiez le code comme suit :
<script type="text/javascript">
vartrIndex = 0 ;
//Ajouter dynamiquement des lignes
onction appendConvert(){
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
var Nom de classe ;
si(null!=sel){
pour(var i = 0; i < sel.options.length; i++){
si (sel.options[i].selected)
className=sel.options[i].value;
}
}
//Les données proviennent du format ajax, json.
convert.getConvertBean2Json(nom de classe,
fonction (résultat) {
var obj = eval('('+résultat+')');
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 = "";
pour(var i = 0; i < obj.paramList.length; i++){
paramStr = paramStr+
"Nom du paramètre :"+obj.paramList[i].name+
";Type de paramètre :"+obj.paramList[i].type+
"; Valeur du paramètre : <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++;
});
}
//supprime la ligne
sur deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}
</script>