AJAX是一種用于創(chuàng)建交互式網(wǎng)頁應(yīng)用程序的技術(shù)，它可以實(shí)現(xiàn)在不刷新整個(gè)頁面的情況下更新頁面的特定部分。在網(wǎng)頁開發(fā)中，我們經(jīng)常需要獲取表格中每行的值。這篇文章將介紹如何使用AJAX來獲取當(dāng)前表格每行的值。

假設(shè)我們有一個(gè)包含學(xué)生信息的表格，包括姓名、年齡和成績(jī)。我們想要通過點(diǎn)擊按鈕來獲取每行學(xué)生的信息，并在控制臺(tái)中輸出。首先，我們需要在HTML中創(chuàng)建一個(gè)表格，并添加一個(gè)按鈕，如下：

<table id="studentTable">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>成績(jī)</th>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>85</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>95</td>
</tr>
</table>
<button id="getDataButton">獲取數(shù)據(jù)</button>

接下來，我們需要編寫JavaScript代碼來實(shí)現(xiàn)通過AJAX獲取每行學(xué)生的信息。我們先給按鈕添加一個(gè)點(diǎn)擊事件監(jiān)聽器，當(dāng)按鈕點(diǎn)擊時(shí)觸發(fā)獲取數(shù)據(jù)的函數(shù)。

document.getElementById("getDataButton").addEventListener("click", getData);
function getData() {
var table = document.getElementById("studentTable");
var rows = table.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
var name = cells[0].innerText;
var age = cells[1].innerText;
var score = cells[2].innerText;
console.log("姓名：" + name + "，年齡：" + age + "，成績(jī)：" + score);
}
}

以上代碼首先通過getElementById獲取到按鈕和表格的DOM元素，然后通過getElementsByTagName獲取到所有的行元素。接下來，我們使用循環(huán)遍歷每一行，再通過getElementsByTagName獲取到每行的單元格元素。通過innerText屬性可以獲取到每個(gè)單元格的文本值。最后，我們將每行學(xué)生的姓名、年齡和成績(jī)輸出到控制臺(tái)。

現(xiàn)在，當(dāng)我們點(diǎn)擊按鈕時(shí)，就可以在控制臺(tái)中看到每行學(xué)生的信息了。例如，點(diǎn)擊按鈕后控制臺(tái)輸出的信息可能如下所示：

姓名：張三，年齡：18，成績(jī)：90
姓名：李四，年齡：20，成績(jī)：85
姓名：王五，年齡：22，成績(jī)：95

這樣，我們通過AJAX成功獲取了當(dāng)前表格每行的值，并進(jìn)行了相應(yīng)的處理。使用AJAX來動(dòng)態(tài)獲取表格數(shù)據(jù)，不僅可以提高用戶體驗(yàn)，還可以簡(jiǎn)化頁面刷新的操作，使得網(wǎng)頁更加流暢和高效。