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

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

1560 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.