recherche

Maison >interface Web >tutoriel HTML >Exemple de formulaire d'opération dom (formulaire de création dom)_HTML/Xhtml_Production de pages Web

Exemple de formulaire d'opération dom (formulaire de création dom)_HTML/Xhtml_Production de pages Web

WBOY
WBOYoriginal
2016-05-16 16:38:121858parcourir

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 :
<script><br>window.onload=function(){<br>vartable=document.createElement("table");<br>//Ajouter des attributs à la table<br>table.width=300;//Vous pouvez également utiliser cette méthode : table.setAttribute ('width',300)<br>table.border=1;</p> <p>//Créer le titre du tableau<br>varcaption=document.createElement("caption");<br>table.appendChild(caption);</p> <p>//Ajouter du contenu au titre du tableau<br>//caption.innerHTML="Personnel Table";//Méthode standard non-W3c<br>varcaptionText=document.createTextNode("Personnel Table"); <br>caption.appendChild(captionText);</p> <p><br>//La première ligne du tableau créé est la ligne de titre<br>varthead=document.createElement("thead");<br>table.appendChild(thead);</p> <p>vartr=document.createElement("tr");<br>thead.appendChild(tr);</p> <p>//Column<br>varth1=document.createElement("th");<br>tr.appendChild(th1);<br>th1.innerHTML="data";<br>varth2=document.createElement ("th");<br>tr.appendChild(th2);<br>th2.innerHTML="data";</p> <p>document.body.appendChild(table);<br>};<br></script>

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 :

<script><br>window.onload=function(){<br>//Utilisez HTMLDOM pour obtenir les éléments du tableau<br>vartable =document.getElementsByTagName ('table')[0];//Obtenir la référence de la table</p> <p>//Appuyez sur HTMLDOM pour supprimer le titre, l'en-tête, le pied de page, la ligne et la cellule<br>//table.deleteCaption();//Supprimez le titre<br>//table.deleteTHead(); // Supprimer<thead><br>//table.tBodies[0].deleteRow(0);//Supprimer<tr>une ligne<br>//table.tBodies[0].rows[0].deleteCell( 0 );//Supprimer<td>une cellule<br>//table.tBodies[0].rows[0].deleteCell(1);//Supprimer le contenu d'une cellule équivaut à supprimer une grille de cellules, je j'espère que ce qui suit sera ajouté <br>};<br></script>

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.
Déclaration：
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
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_webpageArticle suivant：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

Articles Liés

Voir plus