用JS簡單實現table自動編號
1月 01, 2024
在html中用table製作破百列的表格時，有個很困擾的就是編號的問題，因為數量太多一行行code都編號不是個辦法，也不會改動跟管理，於是找到了很簡單的方式用JS自動生成，不用再自己key數字了，實際測試成功，超級好用於是來分享一下，寫法如下：
<table>
<tr>
<th>編號</th>
<th>名稱</th>
<td>內容</td>
</tr>
<tbody id="number">
<tr>
<td></td><!--JS會自動在這一格生成編號-->
<td></td>
<td></td>
</tr>
<tr>
<td></td><!--JS會自動在這一格生成編號-->
<td></td>
<td></td>
</tr>
<tr>
<td></td><!--JS會自動在這一格生成編號-->
<td></td>
<td></td>
</tr>
</table>
<!--表格自動編號-->
<script>
window.onload = function() {
var tableLine = document.getElementById("listnumber");
for (var i = 0; i < tableLine.rows.length; i++) {
tableLine.rows[i].cells[0].innerHTML = (i + 1);
}
};
</script>
幾百列的表格也不是問題！！！
參考資訊
0 意見