Exemple de formulaire d'opération dom (formulaire de création dom)_HTML/Xhtml_Production de pages Web-tutoriel HTML-php.cn

1. Créez un tableau à l'aide de balises HTML :

Copier le code

Le code est le suivant :

Liste du personnel

Nom
Sexe
Âge

< ;
Zhang San
Homme
20

< ;tr>
李思
Femme
22
< 🎜>

Total : N

les balises thead, tfoot et caption ne peuvent avoir qu'une seule balise tbody, tr, td et th dans un tableau. N
dans un tableau 2. Utilisez DOM pour créer des tableaux

La balise

est la structure la plus complexe en HTML. Nous pouvons la créer et la générer via DOM, ou l'exploiter via HTMLDOM. (HTMLDOM offre un moyen plus pratique et plus rapide d'utiliser HTML)

Copier le codeLe code est le suivant :

3. Utilisez DOM pour obtenir des données de table (utiliser DOM pour faire fonctionner des tables sera très ennuyeux)

Copiez le codeLe code est le suivant :

window.onload=function(){
vartable=document.getElementsByTagName("table")[0];
alert(table.children [0].innerHTML);
};

4. Utilisez HTMLDOM pour obtenir des données de tableau (pratique, simple et claire).

Comme le tableau est complexe et comporte de nombreux niveaux, il serait très inconfortable d'utiliser le DOM que vous avez appris auparavant juste pour obtenir un certain élément, ce sera donc beaucoup plus clair en utilisant HTMLDOM.

Copier le codeLe code est le suivant :

window.onload=function( ){
//Utilisez HTMLDOM pour obtenir les éléments du tableau
vartable=document.getElementsByTagName('table')[0];//Obtenez la référence du tableau
//Appuyez sur HTMLDOM pour obtenir le < caption>
alert(table.caption.innerHTML);//Obtenir le contenu de la légende
//table.caption.innerHTML="Table des étudiants";//Vous pouvez également définir la valeur
} ;

Copier le codeLe code est le suivant :

window.onload=function(){
//Utilisez HTMLDOM pour obtenir les éléments du tableau
vartable=document.getElementsByTagName('table')[0];//Obtenir la référence du tableau
//Appuyez sur HTMLDOM pour obtenir l'en-tête du tableau

,
alert(table.tHead);//Obtenez l'en-tête du tableau
alert(table.tFoot);//Obtenez le pied du tableau< ; /p>

//Appuyez sur HTMLDOM pour obtenir le corps du tableau

alert(table.tBodies);//Obtenez la collection de corps de tableau
};

et sont uniques dans un tableau, et il ne peut y en avoir qu'un. Et n'est pas le seul mais peut en avoir plusieurs, donc et sont finalement des références d'éléments, tandis que

Copier le code

Le code est le suivant :

window.onload=function( ){
//Utilisez HTMLDOM pour obtenir les éléments du tableau
vartable=document.getElementsByTagName('table')[0];//Obtenir la référence du tableau
//Appuyez sur HTMLDOM pour obtenir le nombre de lignes dans le table
alert( table.rows.length);//Obtenir la collection de numéros de ligne, quantité

//Appuyez sur HTMLDOM pour obtenir le nombre de lignes dans le corps du tableau
alert(table.tBodies[0].rows.length);//Obtenez la collection de lignes dans le corps, quantité
};

Copier le code

Le code est le suivant :

window.onload= function(){
//Utilisez HTMLDOM pour obtenir les éléments du tableau
vartable=document.getElementsByTagName('table')[0];//Obtenir la référence du tableau

//Appuyez sur HTMLDOM pour obtenir le nombre de cellules dans la première ligne du corps du tableau (tr)
alert(table.tBodies[0].rows[0].cells.length);//Get le premier Le nombre de cellules de ligne
};

Copiez le code

Le code est la suivante :

window.onload=function(){
//Utilisez HTMLDOM pour obtenir des éléments de tableau
vartable=document.getElementsByTagName('table')[0];/ /Obtenir la référence du tableau<

//Appuyez sur HTMLDOM pour obtenir le contenu de la première cellule de la première ligne du corps du tableau (td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML ) ;//Obtenir le contenu de la première cellule de la première ligne
};

Copier le code

Le code est le suivant :

5. Table de création HTMLDOM

Copier le code

Le code est le suivant :

window.onload=function( ){
//Créer un tableau selon HTMLDOM
vartable=document.createElement('table');
table.border=1;
table.width=300;

table.createCaption().innerHTML='Tableau du personnel';

//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead();//Cette méthode renvoie une référence
vartr=thead .insertRow(0);//Cette méthode renvoie une référence

vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('data'));//Une façon d'ajouter des données, vous pouvez également utiliser les méthodes suivantes
td.innerHTML="data";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('data2'));
td2.innerHTML="data2 ";

document.body.appendChild(table);
};Lors de la création d'un tableau, il n'existe pas de méthode spécifique pour

, ,

créez-le. Vous pouvez également simuler des méthodes existantes et écrire des fonctions spécifiques, telles que insertTH(), etc.

Étiquettes associées：

dom操作表格 dom创建表格

source：php.cn

Article précédent：Appelez la fonction js ou la variable js dans img src="" du HTML pour spécifier dynamiquement la production de l'image path_HTML/Xhtml_webpage Article suivant：Définissez le texte par défaut du champ de recherche et le texte par défaut disparaît lorsque vous cliquez sur la souris_HTML/Xhtml_Production de pages Web

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur