Dalam keperluan kerja dan projek, kadangkala bilangan baris dalam jadual tidak dapat memenuhi keperluan kami Pada masa ini, kami perlu meningkatkan bilangan baris dalam jadual secara dinamik. Editor berikut akan memperkenalkan kepada anda melalui contoh kod bagaimana untuk mencipta jadual dengan js dan menambah bilangan baris dalam jadual, dan juga melaksanakan fungsi menukar warna baris ganti. Kawan-kawan yang berminat ni boleh rujuk kod:
Kod js adalah seperti berikut:
<!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>Kandungan di atas adalah kod yang berkaitan untuk membuat jadual secara dinamik dan menambah bilangan baris jadual berdasarkan JavaScript. Saya harap anda menyukainya.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
