現在越來越多的網站都使用了動態表格,而表格的數據都被儲存在數據庫中,因此我們需要通過代碼來遍歷表格以獲取數據。而jQuery可以幫助我們更加方便地遍歷頁面元素,下面就以表格行為例,演示如何使用jQuery來遍歷表格行并從數據庫中獲取數據。
//獲取表格行數據 $('table tr').each(function() { var $this = $(this); var id = $this.find('.id').text(); //獲取id單元格中的文本內容 var name = $this.find('.name').text(); //獲取name單元格中的文本內容 //通過Ajax向后臺發送請求 $.ajax({ type: "POST", url: "getdata.php", data: { id: id, name: name }, success: function(response) { //請求成功后將數據添加到頁面中 $this.find('.data').text(response); //將獲取的數據添加到data單元格中 } }); });
以上代碼中,首先我們使用jQuery的each方法來遍歷每一行的表格,然后通過find方法來獲取每一行中的id和name數據。接著我們使用Ajax向后臺發送請求,將id和name數據傳遞給后臺的getdata.php頁面,并在請求成功后將返回的數據添加到data單元格中。
這樣,我們就通過jQuery遍歷了表格行并從數據庫中獲取了數據,適用于許多數據展示的情況,使得數據更新更方便快捷。