Il y a plusieurs lignes dans le tableau: var trcnt = table.Rows.length; (le tableau est id)
Combien de colonnes y a-t-il pour chaque ligne: pour (var i = 0; i <trcnt; i ++)
table.Rows [i] .Cells.length;
Tableau d'opération JavaScript:
insertrow (), deeterow (), insertCell (), DeleteCell () Méthodes
table.insertrow () est bien sous IE, mais dans Firefox, il doit être changé en table.insertrow (-1)
De même, l'insertcell () correspondant doit également être modifié en insertcell (-1)
Méthode insertrow ()
Définition et utilisation
La méthode insertrow () est utilisée pour insérer une nouvelle ligne à une position spécifiée dans le tableau.
grammaire
TableObject.Insertrow (index)
Valeur de retour
Renvoie une table de table, indiquant la ligne nouvellement insérée.
illustrer
Cette méthode crée un nouvel objet TableRow, représente une nouvelle balise <tr> et l'inserte dans la position spécifiée dans le tableau.
La nouvelle ligne sera insérée avant la ligne d'index. Si l'indice est égal au nombre de lignes dans le tableau, la nouvelle ligne sera annexée à la fin du tableau.
Si la table est vide, la nouvelle ligne sera insérée dans un nouveau segment <TBODY>, qui sera lui-même inséré dans la table.
Jeter
Si l'indice de paramètre est inférieur à 0 ou supérieur ou égal au nombre de lignes dans la table, cette méthode lancera une exception Domexception avec le code index_size_err.
exemple
La copie de code est la suivante:
<html>
<adal>
<script type = "text / javascript">
fonction insrow ()
{
document.getElementById ('myTable'). insertrow (0)
}
</cript>
</ 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 />
<entrée type = "bouton" onclick = "insrow ()"
value = "insérer une nouvelle ligne">
</docy>
</html>
DeleteCell ()
Définition et utilisation
La méthode DeleteCell () est utilisée pour supprimer les cellules (<td> éléments) dans une rangée de table.
grammaire
TableRowObject.DeleteCell (Index)
illustrer
L'indice de paramètre est la position de l'élément de table à supprimer dans la ligne.
Cette méthode supprime les éléments de table à la position spécifiée dans la ligne de table.
Jeter
Si l'indice de paramètre est inférieur à 0 ou supérieur ou égal à l'élément de table dans la ligne, cette méthode lancera une exception Domexception avec le code index_size_err.
exemple
La copie de code est la suivante:
<html>
<adal>
<script type = "text / javascript">
fonction delrow ()
{
document.getElementById ('myTable'). DeleterOw (0)
}
</cript>
</ 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 />
<entrée type = "bouton" onClick = "Delrow ()"
Value = "Supprimer la première ligne">
</docy>
</html>
insertCell ()
Définition et utilisation
La méthode insertCell () est utilisée pour insérer un élément <td> vide à la position spécifiée d'une ligne dans la table 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éera un nouvel élément <TD> et l'inserrera dans la position spécifiée dans la ligne. La nouvelle cellule sera insérée avant l'élément de table actuellement situé à la position spécifiée dans l'index. Si l'indice est égal au nombre de cellules dans la ligne, la nouvelle cellule est ajoutée à la fin de la ligne.
Notez que cette méthode ne peut insérer que des éléments de table de données <TD>. Si vous avez besoin d'ajouter des éléments d'en-tête à une ligne, vous devez créer et insérer un élément <h> à l'aide de la méthode document.CreateElement () et de la méthode Node.insertFore () (ou méthodes connexes).
Jeter
Si l'indice de paramètre est inférieur à 0 ou supérieur ou égal à l'élément de table dans la ligne, cette méthode lancera une exception Domexception avec le code index_size_err.
exemple
La copie de code est la suivante:
<html>
<adal>
<script type = "text / javascript">
fonction InsCell ()
{
var x = document.getElementByid ('tr2'). insertcell (0)
x.innerhtml = "John"
}
</cript>
</ head>
<body>
<ballage>
<tr id = "tr1">
<h> FirstName </th>
<h> LastName </th>
</tr>
<tr id = "tr2">
<Td> Peter </td>
<TD> Griffin </td>
</tr>
</ table>
<br />
<entrée type = "bouton" onClick = "InsCell ()" value = "insérer la cellule">
</docy>
</html>
DeleteCell ()
Définition et utilisation
La méthode DeleteCell () est utilisée pour supprimer les cellules (<td> éléments) dans une rangée de table.
grammaire
TableRowObject.DeleteCell (Index)
illustrer
L'indice de paramètre est la position de l'élément de table à supprimer dans la ligne.
Cette méthode supprime les éléments de table à la position spécifiée dans la ligne de table.
Jeter
Si l'indice de paramètre est inférieur à 0 ou supérieur ou égal à l'élément de table dans la ligne, cette méthode lancera une exception Domexception avec le code index_size_err.
exemple
La copie de code est la suivante:
<html>
<adal>
<script type = "text / javascript">
fonction delcell ()
{
document.getElementById ('tr2'). DeleteCell (0)
}
</cript>
</ head>
<body>
<ballage>
<tr id = "tr1">
<h> FirstName </th>
<h> LastName </th>
</tr>
<tr id = "tr2">
<Td> Peter </td>
<TD> Griffin </td>
</tr>
</ table>
<br />
<entrée type = "bouton" onclick = "delcell ()" value = "delete cellule">
</docy>
</html>
Applications dans le projet:
La copie de code est la suivante:
<script type = "text / javascript">
var trindex = 0;
// augmenter dynamiquement la ligne
onction appendConvert () {
// var sel = document.getElementById ("selectConvertName");
var sel = document.getElementsByName ("selectConvertName") [0];
var className;
if (null! = sel) {
pour (var i = 0; i <sel.options.length; i ++) {
if (sel.options [i] .Selected)
className = sel.options [i] .Value;
}
}
// Les données proviennent du formulaire AJAX, JSON.
convert.getConvertBean2JSON (ClassName,
fonction (résultat) {
var obj = eval ('(' + résultat + ')');
var table = document.getElementById ("convertable");
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 ++;
});
}
// Supprimer la ligne
sur Deleterow (r) {
var i = r.parentNode.parentNode.RowIndex;
document.getElementById («ConvertTable»). Deleterow (i);
Trindex--;
}
</cript>