Comment créer un tableau en javascript (deux façons de dessiner un tableau en javascript)

Auteur：Eve Cole Date de mise à jour：2025-01-28 04:00:02

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">

<tête>

<titre>Blu-ray-BlueShine</titre>

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;"

<td>Ligne 1</td>

</tr>

</table>

<étiquette>

</étiquette>

</corps>

</html>

5. Méthode appendChild()

Copiez le code comme suit :

<html>

<tête>

<!--

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>

<!--

étiquette {

affichage:bloc;

marge : .25em 0em ;

}

-->

</style>

</tête>

<corps>

<label>Zone de texte n° 1 : <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</form>

</corps>

</html>

<html>

<tête>

<!--

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>

<!--

étiquette {

affichage:bloc;

marge : .25em 0em ;

}

-->

</style>

</tête>

<corps>

<label>Zone de texte n° 1 : <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</form>

</corps>

</html>