communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

Création dynamique de tableaux et augmentation du nombre de lignes de tableau en fonction des compétences JavaScript_javascript

WBOY
Libérer： 2016-05-16 15:24:32
original
1574 Les gens l'ont consulté

Dans les exigences du travail et du projet, parfois le nombre de lignes dans le tableau ne peut pas répondre à nos besoins. Pour le moment, nous devons augmenter dynamiquement le nombre de lignes dans le tableau. L'éditeur suivant vous présentera à travers un exemple de code. comment créer un tableau avec js et ajouter le nombre de lignes dans le tableau, et implémente également la fonction de changement de couleur des lignes alternées. Les amis que cela intéresse peuvent se référer au code :

le code js est le suivant : 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态操作表格</title>
</head>
<body>
<script type="text/javascript">
var n = 0;
function showTable(len) 
{
 wi('<table border="1" width="300" style="border-collapse:collapse"><tbody id="table">');
 for (i=0;i<len;i++) 
 {
 if (parseInt(i%2)==1) 
{
  bg = '#F4FAC7';
 } 
else 
{
  bg = 'white'; 
 }
 wi('<tr bgcolor='+bg+'><td>第'+(i+1)+'行</td></tr>'); 
 }
 wi('</tbody></table><br />');
 wi('<input type="button" value="Add" id="add" />'); 
}</P>
<P>function wi(str) 
{
 return document.write(str); 
}
showTable(10);
var add = document.getElementById("add");
 add.onclick = function() {
 n = n+1;
 if (n%2==0) 
 {
 bg = '#F4FAC7';
 } 
 else 
 {
 bg = 'white'; 
 }
 var table = document.getElementById("table");
 var tr = document.createElement("tr");
 tr.bgColor = bg;
 var td = document.createElement("td");
 td.innerHTML = '第'+(10+n)+'行';
 tr.appendChild(td);
 table.appendChild(tr);
}
</script>
</body>
</html>
Copier après la connexion

Le contenu ci-dessus est un code associé pour créer dynamiquement des tableaux et augmenter le nombre de lignes de tableau basé sur JavaScript. J'espère qu'il vous plaira.

Étiquettes associées：
javascript动态表格 js增加表格行
source：php.cn
Article précédent：js pour acquérir des compétences d'effet de carrousel d'images_javascript Article suivant：js implémente le téléchargement d'images et les compétences normales display_javascript
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
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Méthodes pour trouver le temps moyen nécessaire à la transition d'état : à l'aide d'une requête Eloquent ou DB J'ai une table appelée state_histories avec le contenu suivant : Type d'entité Entity_id É...
Depuis 2024-04-04 14:58:46
0
1
351
Titre révisé : Calculer le total en fonction de la sélection d'une case à cocher Je développe une application simple de suivi financier. Dans l'application, il y a un tabl...
Depuis 2024-04-04 13:45:50
0
1
3465
JQuery - Calculs/conversions à la volée dans des tables dynamiques J'ai un tableau HTML dynamique (des lignes peuvent être ajoutées) et je veux "juste&q...
Depuis 2024-04-03 12:38:26
0
1
393
Requête croisée en PHP et MYSQL Je cherchais un moyen d'implémenter une requête croisée dans MySQL et j'ai trouvé la répon...
Depuis 2024-04-02 22:34:20
0
1
414
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal