1. Fonctions insertRow() et insertCell()
La fonction insertRow() peut prendre des paramètres, sous la forme suivante :
insertRow(index) : l'index commence à 0
Cette fonction ajoute une nouvelle ligne avant la ligne d'index, comme insertRow(0), qui ajoute une nouvelle ligne avant la première ligne. La fonction insertRow() par défaut est équivalente à insertRow(-1), qui ajoute une nouvelle ligne à la fin du tableau. Généralement, quand on l'utilise : objTable.insertRow(objTable.rows.length). Il s'agit d'ajouter une nouvelle ligne à la fin du tableau objTable.
L'utilisation de insertCell() et insertRow est la même et ne sera pas abordée ici.
2. Méthodes deleteRow() et deleteCell()
La fonction deleteRow() peut prendre des paramètres, la forme est la suivante : deleteRow(index) : l'index commence à 0
La même signification que les deux méthodes ci-dessus est de supprimer les lignes et les cellules à la position spécifiée. Paramètres à transmettre : L'index est la position de la ligne dans le tableau. Il peut être obtenu par la méthode suivante puis supprimé :
Copiez le code comme suit :
var row=document.getElementById("ID de la ligne");
var index=row.rowIndex;//Il y a cet attribut, hehe
objTable.deleteRow(index);
Laissez-moi vous parler d'un problème que j'ai rencontré lors de l'utilisation. Lors de la suppression de lignes dans un tableau, si vous supprimez une certaine ligne, le nombre de lignes dans le tableau changera immédiatement. Donc, si vous souhaitez supprimer toutes les lignes du tableau, le. le code suivant est faux :
Copiez le code comme suit :
fonction clearRow(){
objTable= document.getElementById("maTable");
pour( var i=1; i<objTable.rows.length ; i++ )
{
tblObj.deleteRow(i);
}
}
Ce code veut supprimer le corps de la table d'origine. Il y a deux problèmes. Tout d’abord, il ne peut pas s’agir de deleteRow(i), il devrait s’agir de deleteRow(1). Parce que lors de la suppression de lignes du tableau, le nombre de lignes dans le tableau change. C'est la clé du problème. La longueur des lignes devient toujours plus petite et le nombre de lignes supprimées est toujours inférieur à la moitié de ce qui est attendu. supprimez la table correctement. La ligne de code devrait ressembler à ceci :
Copiez le code comme suit :
fonction clearRow(){
objTable= document.getElementById("maTable");
var longueur= objTable.rows.length;
pour(var i=1; i<longueur; i++)
{
objTable.deleteRow(i);
}
}
3. Définissez dynamiquement les propriétés des cellules et des lignes
A. Utilisez la méthode setAttribute() avec le format suivant : setAttribute(attribute, valeur d'attribut)
Remarque : Cette méthode peut être utilisée pour presque tous les objets DOM. Le premier paramètre est le nom de l'attribut, par exemple : border, et le deuxième paramètre est la valeur que vous souhaitez définir pour border, par exemple : 1.
Copiez le code comme suit :
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border",1);//Définissez la bordure à 1 pour la table
Pour d'autres choses, par exemple, si vous souhaitez définir la hauteur d'un TD, vous devez également d'abord obtenir l'objet TD, puis utiliser la méthode setAttribute().
Copiez le code comme suit :
var objCell = document.getElementById("maCell");
objCell.setAttribute("height",24);//Définit la hauteur de la cellule sur 24
J'ai rencontré un problème avec la définition des styles lors de son utilisation. Vous ne pouvez pas utiliser setAttribute("class","inputbox2"); vous devriez utiliser setAttribute("className","inputbox2"). , certains Les attributs ne correspondent pas à ce que nous avons dans DW, haha, explorons par nous-mêmes.
B. Affectation directe
Copiez le code comme suit :
var objMyTable = document.getElementById("myTable");
objMyTable.border=1;//Mettez la bordure à 1 pour le tableau
Cette méthode est également applicable à tous, haha.
4. Créez un tableau
Une fois que vous avez compris l'ajout et la suppression de lignes <tr> et de cellules <td>, vous pouvez créer un tableau.
Étape 1 : Vous devez avoir une table que vous souhaitez modifier dynamiquement. Ce dont je parle ici est une table qui existe déjà sur la page. Nous devons définir un identifiant : myTable.
Copiez le code comme suit :
var objMyTable = document.getElementById("myTable");
Étape 2 : Créer des objets de ligne et de colonne
Copiez le code comme suit :
var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//Les lignes à ajouter sont ajoutées de l'avant-dernière ligne.
//Numéro de boîte de cellule
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
newCellCartonNo.setAttribute("className","tablerdd");
Voilà, vous pouvez simplement créer une ligne et une colonne. J'ai posté le code spécifique ci-dessous. C'est juste un exemple très simple, mais la méthode est probablement la même que ci-dessus Haha, explorons lentement~.
Copiez le code comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<titre>Blu-ray-BlueShine</titre>
<langage de script="JavaScript">
var Nombre=faux,NON=1 ;
fonction addRow(){
Compte=!Compte;
//Ajouter une ligne
var newTr = testTbl.insertRow(testTbl.rows.length);
//Ajoute deux colonnes
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//Définir le contenu et les attributs de la colonne
if(Count){newTr.style.background="#FFE1FF";}
sinon {newTr.style.background="#FFEFD5";}
newTd0.innerHTML = '<input type=checkbox id="box4">';
NON++
newTd1.innerText="Ligne "+ NON+";
}
</script>
</tête>
<corps>
<table border=0 cellpacing="1" id="testTbl" style="font-size:14px;"
<tr bgcolor="#FFEFD5">
<td width=6%><input type=checkbox id="box1"></td>
<td>Ligne 1</td>
<td> </td>
</tr>
</table>
<étiquette>
<input type="button" value="Insérer une ligne" onclick="addRow()" />
</étiquette>
</corps>
</html>
5. Méthode appendChild()
Copiez le code comme suit :
<html>
<tête>
<title>Ma page de test</title>
<script type="text/javascript">
<!--
var numérotexte = 1 ;
fonction addTextBox (formulaire, afterElement) {
// Incrémente le numéro de la zone de texte
texteNuméro++ ;
//Créer l'étiquette
var label = document.createElement("label");
//Créer la zone de texte
var textField = document.createElement("input");
textField.setAttribute("type","texte");
textField.setAttribute("nom","txt"+textNumber);
textField.setAttribute("id","txt"+textNumber);
// Ajoute le texte du label
label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
// Place la zone de texte à l'intérieur
label.appendChild(textField);
// On ajoute le tout au formulaire
form.insertBefore(label,afterElement);
renvoie faux ;
}
fonction removeTextBox (formulaire) {
if (textNumber > 1) { // S'il y a plus d'une zone de texte
// Supprime le dernier ajouté
form.removeChild(document.getElementById("txt"+textNumber).parentNode);
numérotexte--;
}
}
//-->
</script>
<style type="text/css">
<!--
étiquette {
affichage:bloc;
marge : .25em 0em ;
}
-->
</style>
</tête>
<corps>
<form id="myForm" method="get" action="./" />
<label>Zone de texte n° 1 : <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Ajouter une zone de texte" onclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Supprimer la zone de texte" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Soumettre" value="Soumettre" /></p>
</form>
</corps>
</html>
<html>
<tête>
<title>Ma page de test</title>
<script type="text/javascript">
<!--
var numérotexte = 1 ;
fonction addTextBox (formulaire, afterElement) {
// Incrémente le numéro de la zone de texte
numérotexte++ ;
//Créer l'étiquette
var label = document.createElement("label");
//Créer la zone de texte
var textField = document.createElement("input");
textField.setAttribute("type","texte");
textField.setAttribute("nom","txt"+textNumber);
textField.setAttribute("id","txt"+textNumber);
// Ajoute le texte du label
label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
// Place la zone de texte à l'intérieur
label.appendChild(textField);
// On ajoute le tout au formulaire
form.insertBefore(label,afterElement);
renvoie faux ;
}
fonction removeTextBox (formulaire) {
if (textNumber > 1) { // S'il y a plus d'une zone de texte
// Supprime le dernier ajouté
form.removeChild(document.getElementById("txt"+textNumber).parentNode);
numérotexte--;
}
}
//-->
</script>
<style type="text/css">
<!--
étiquette {
affichage:bloc;
marge : .25em 0em ;
}
-->
</style>
</tête>
<corps>
<form id="myForm" method="get" action="./" />
<label>Zone de texte n° 1 : <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Ajouter une zone de texte" onclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Supprimer la zone de texte" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Soumettre" value="Soumettre" /></p>
</form>
</corps>
</html>