在web開發中,表格是一個常用的元素。但是當需要動態的添加表格行時,代碼會變得冗長而不易維護。而使用jquery庫,可以輕松實現表格自動添加行。
首先需要在html中添加一個表格,并為表格添加頭部,例如:
<table id="myTable"> <thead> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>男</td> <td>25</td> </tr> <tr> <td>李四</td> <td>女</td> <td>28</td> </tr> </tbody> </table>
接下來,我們可以添加一個按鈕,當點擊按鈕時,就會自動添加一行數據。代碼如下:
<button id="addRowBtn">添加一行</button>
最后,我們需要添加jquery代碼來使按鈕點擊后自動添加表格行。代碼如下:
<script> $(function() { $('#addRowBtn').on('click', function() { var newRowHtml = '<tr><td></td><td></td><td></td></tr>'; $('#myTable tbody').append($(newRowHtml)); }); }); </script>
以上代碼使用了jquery的append方法,在表格的tbody中添加一行。同時,還可以根據需要修改新行的內容,以適應不同的需求。
上一篇jquery表格第三列
下一篇div hover浮動