色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery表格動態獲取數據

李世東1年前6瀏覽0評論

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實現了動態獲取表格數據的功能,可以滿足很多實際需求。