recherche

Maison >interface Web >js tutoriel >Création dynamique de tableaux et augmentation du nombre de lignes de tableau en fonction des compétences JavaScript_javascript

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

WBOY
WBOYoriginal
2016-05-16 15:24:321606parcourir

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>

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.

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：js pour acquérir des compétences d'effet de carrousel d'images_javascriptArticle suivant：js pour acquérir des compétences d'effet de carrousel d'images_javascript

Articles Liés

Voir plus