Jquery是一個輕量級的JS庫,可以大大簡化JavaScript編程。特別是在表格數據處理方面,Jquery的優勢得到了充分發揮。在此,我們將介紹如何使用Jquery動態獲取表格數據。
首先,我們需要先編寫HTML代碼。在頁面上添加一個表格元素,如下所示:
<table id="table1"> <thead> <tr> <th>序號</th> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>小明</td> <td>20</td> <td>男</td> </tr> <tr> <td>2</td> <td>小紅</td> <td>18</td> <td>女</td> </tr> <tr> <td>3</td> <td>小剛</td> <td>22</td> <td>男</td> </tr> </tbody> </table>
接下來,在JS文件中引入Jquery,在代碼中找到表格元素,使用Jquery的.each()方法遍歷表格數據,并將數據打印到控制臺上。代碼如下:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { var data = []; var $table = $('#table1'); $table.find('tbody tr').each(function(index, element) { var tdArr = $(this).children(); var item = {}; item.serial_number = tdArr.eq(0).text(); item.name = tdArr.eq(1).text(); item.age = tdArr.eq(2).text(); item.gender = tdArr.eq(3).text(); data.push(item); }); console.log(data); }); </script>
當我們運行此代碼時,就會在控制臺上看到表格數據的數組。這樣,我們就可以使用Jquery實現了動態獲取表格數據的功能,可以滿足很多實際需求。