本次實驗的目的是學習如何使用jQuery來創建和操作HTML表格。
在本次實驗中,我們首先需要引入jQuery庫:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
接下來我們創建一個簡單的表格:
<table id="myTable"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> <tr> <td>王五</td> <td>22</td> <td>男</td> </tr> </tbody> </table>
我們可以使用jQuery來添加表格行:
$(document).ready(function() { $('#myTable tbody').append('<tr><td>趙六</td><td>25</td><td>女</td></tr>'); });
此外,我們還可以使用jQuery來刪除表格行:
$(document).ready(function() { $('#myTable tbody tr:last-child').remove(); });
最后,我們可以使用jQuery來查找和操作表格中的元素:
$(document).ready(function() { $('#myTable tr').eq(1).find('td').eq(1).text('21'); });
以上就是本次實驗的全部內容,通過學習本次實驗,我們可以掌握如何使用jQuery來創建和操作HTML表格。