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.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
