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.
Der Unterschied zwischen zufällig und pseudozufällig
So importieren Sie ein altes Telefon von einem Huawei-Mobiltelefon in ein neues Telefon
WeChat konnte keine Daten laden
Der Unterschied zwischen Unix und Linux
So ändern Sie die Schriftfarbe in Dreamweaver
So verwenden Sie die Wertfunktion
So beheben Sie Fehler1
So überprüfen Sie den Videospeicher von Win11
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
