suchen

Heim >Web-Frontend >js-Tutorial >Dynamische Erstellung von Tabellen und Erhöhung der Anzahl der Tabellenzeilen basierend auf JavaScript_Javascript-Kenntnissen

Dynamische Erstellung von Tabellen und Erhöhung der Anzahl der Tabellenzeilen basierend auf JavaScript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:24:321579Durchsuche

Bei Arbeits- und Projektanforderungen kann die Anzahl der Zeilen in der Tabelle manchmal nicht unseren Anforderungen entsprechen. Zu diesem Zeitpunkt müssen wir die Anzahl der Zeilen in der Tabelle dynamisch erhöhen. Der folgende Editor wird Ihnen anhand eines Codebeispiels vorgestellt So erstellen Sie eine Tabelle mit js und fügen die Anzahl der Zeilen in der Tabelle hinzu und implementieren außerdem die Farbänderungsfunktion alternativer Zeilen. Freunde, die sich dafür interessieren, können auf den Code verweisen:

JS-Code lautet wie folgt: 

<!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>

Der obige Inhalt ist verwandter Code zum dynamischen Erstellen von Tabellen und zum Erhöhen der Anzahl von Tabellenzeilen basierend auf JavaScript. Ich hoffe, er gefällt Ihnen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js, um Bildkarusselleffekt_Javascript-Fähigkeiten zu erlangenNächster Artikel：js, um Bildkarusselleffekt_Javascript-Fähigkeiten zu erlangen

In Verbindung stehende Artikel

Mehr sehen