卡卡網(wǎng)

jQuery獲得表格單元TD值：本文介紹如何在jquery中獲取click事件的表單元格值。我們的表格單元格值可能包含簡單的文本值或某些HTML元素，例如（div，span，textbox）。所以今天將學(xué)習(xí)如何使用jquery對行選擇來讀取這些表格單元格值（TD值），例如怎樣用jquery獲得或訪問TD里的div內(nèi)容。還有看看如何把完整HTML表格數(shù)據(jù)存儲到JSON數(shù)組。通過使用jquery，有很多方式可以獲得TD里的值，我們準(zhǔn)備介紹4種簡單方式通過行和列去獲得表格單元格數(shù)據(jù)。

首先，我們需要在我們的網(wǎng)頁head標(biāo)簽中下載并導(dǎo)入最新的jquery庫。 您可以從服務(wù)器托管的jQuery文件導(dǎo)入，也可以使用百度托管的jQuery文件（推薦）。 讓我們前往編碼部分，逐步完成每個部分。 例：

jQuery獲得表格單元TD值

1、使用jQuery通過點擊獲得表格單元格TD值

我們在網(wǎng)頁中下載并導(dǎo)入Jquery js文件之后，就可以使用jquery函數(shù)了。

HTML標(biāo)記：使用虛擬數(shù)據(jù)添加HTML表。

接下來，我們必須添加HTML標(biāo)記，例如我們想要讀取其數(shù)據(jù)的HTML表。 您可以使用JSON數(shù)據(jù)在jquery中創(chuàng)建動態(tài)HTML表，但為了簡單起見，我硬編碼將HTML表添加為Id，ProductName，Description列，并在其中添加了一些虛擬數(shù)據(jù)。 這就是我們的HTML標(biāo)記的樣子，如下所示。

<table border='1' id="myTable">
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Description</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Moto G</td>
<td>Moto G next generation smart phone</td>
<td><button class="btnSelect">Select</button></td>
</tr>
<tr>
<td>2</td>
<td>Iphone SE</td>
<td>Iphone laucnhed new phone bosy of 5s with feature of 6s</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>3</td>
<td>Sony z3</td>
<td>This is waterproof, well designed, etc</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>4</td>
<td>Moto X Play</td>
<td>Another class product from Moto G Family</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>5</td>
<td>Samsung S7</td>
<td>Best smart phone, nice UI etc.</td>
<td><button class="btnSelect">Select</button></td>
</tr>
</table>

jQuery：通過點擊按鈕獲得TD值

現(xiàn)在我們在每一行中添加的選擇按鈕上綁定一個jquery click事件。 使用jquery .text()方法我們得到TD值（表格單元格值）。代碼如下所示。

$(document).ready(function(){

  //用于讀取所選表行單元格數(shù)據(jù)（值）的代碼
  $("#myTable").on('click','.btnSelect',function(){
    //獲得當(dāng)前行
    var currentRow=$(this).closest("tr"); 

    var col1=currentRow.find("td:eq(0)").text(); //獲得當(dāng)前行第一個TD值
    var col2=currentRow.find("td:eq(1)").text(); //獲得當(dāng)前行第二個TD值
    var col3=currentRow.find("td:eq(2)").text(); //獲得當(dāng)前行第三個TD值
    var data=col1+"\n"+col2+"\n"+col3;

    alert(data);
  });
});

使用上面的jquery代碼，我們能夠在按鈕單擊時讀取HTML表格單元格值。 jquery .text()方法將僅返回文本值，即跳過html并僅顯示文本數(shù)據(jù)。

execcodegetcode

2、如何使用jquery讀取包含HTML元素的表格單元格值，即（div，span，textbox）。

HTML標(biāo)記：使用一些html元素添加HTML表和數(shù)據(jù)。

在這里，我們將學(xué)習(xí)如何獲取包含HTML內(nèi)容的HTML表格單元格值。 在實際開發(fā)場景中，有時需要從表格單元格中獲取HTML內(nèi)容， 然后將其附加到另一個HTML元素中。 在這里，我們將HTML數(shù)據(jù)添加到表中。 這就是我們的HTML標(biāo)記的樣子，如下所示。

<table border='1' id="myTable">
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Description</th>
<th>Action</th>
</tr>
<tr>
<td><span>1</span></td>
<td><strong>Moto G</strong></td>
<td>Moto G next generation smart phone</td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>
<tr>
<td><span>2</span></td>
<td><strong>Iphone SE</strong></td>
<td>Iphone laucnhed new phone bosy of 5s with feature of 6s</td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>

<tr>
<td><span>3</span></td>
<td><strong>Sony z3</strong></td>
<td>This is waterproof, well designed, etc</td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>

<tr>
<td><span>4</span></td>
<td><strong>Moto X Play</strong></td>
<td>Another class product from Moto G Family</td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>

<tr>
<td><span>5</span></td>
<td><strong>Samsung S7</strong></td>
<td>Best smart phone, nice UI etc.</td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>
</table>

Jquery：在按鈕單擊時獲取HTML元素內(nèi)部（TD）表格單元格值的代碼。

首先，我們在選擇按鈕上綁定click事件，然后使用jquery .html()方法獲取HTML內(nèi)容。 之前我們使用.text()方法返回表格單元格td值的文本數(shù)據(jù)。 所以要返回HTML數(shù)據(jù)，這里我們使用.html()方法獲取表格單元格中的所有html數(shù)據(jù)。 所以現(xiàn)在我們的代碼如下所示：

$(document).ready(function(){

  //用于讀取所選表行單元格數(shù)據(jù)（值）的代碼。
  $("#myTable").on('click','.btnSelect',function(){
    //獲得當(dāng)前行
    var currentRow=$(this).closest("tr");

    var col1=currentRow.find("td:eq(0)").html(); //獲得當(dāng)前和第一個表格單元格TD值
    var col2=currentRow.find("td:eq(1)").html(); //獲得當(dāng)前和第一個表格單元格TD值
    var col3=currentRow.find("td:eq(2)").html(); //獲得當(dāng)前和第一個表格單元格TD值
    var data=col1+"\n"+col2+"\n"+col3;

    alert(data);
  });
});

execcodegetcode

3、如何使用jquery獲取表格單元格特定的span或div HTML內(nèi)容。

HTML標(biāo)記：使用一些html元素添加HTML表和數(shù)據(jù)。

在本節(jié)中，我們將看到如何在TD（表格單元格）中獲取特定的div或span元素值。 在上一節(jié)中已經(jīng)展示了如何從表格單元格中獲取HTML內(nèi)容，現(xiàn)在我們看到如何使用jquery從表格單元格（TD）中獲取特定的HTML元素。 即，如何使用jquery在表行中查找元素或在TD中查找類。

<table border='1' id="myTable">
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Description</th>
<th>Action</th>
</tr>
<tr>
<td><span>1</span></td>
<td><strong class='pd-name'>Moto G</strong></td>
<td><p>Moto G next generation smart phone <span class="pd-price">50$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>
<tr>
<td><span>2</span></td>
<td><strong class='pd-name'>Iphone SE</strong></td>
<td><p>Iphone laucnhed new phone bosy of 5s with feature of 6s<span class="pd-price">500$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>

<tr>
<td><span>3</span></td>
<td><strong class='pd-name'>Sony z3</strong></td>
<td><p>This is waterproof, well designed, etc<span class="pd-price">250$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>

<tr>
<td><span>4</span></td>
<td><strong class='pd-name'>Moto X Play</strong></td>
<td><p>Another class product from Moto G Family<span class="pd-price">150$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>

<tr>
<td><span>5</span></td>
<td><strong class='pd-name'>Samsung S7</strong></td>
<td><p>Best smart phone, nice UI etc.<span class="pd-price">450$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>
</table>

jQuery：使用jquery獲取特定HTML元素（div或span）內(nèi)容的表格單元格值的代碼。

由于我們需要訪問表TD中的特定div / span內(nèi)容，我們將使用jquery .find()方法。 使用.find()方法并傳遞特定HTML元素的類名，我們能夠獲得特定div / span內(nèi)容的表格單元格值。 這里我們只想從最后一個表格單元格中獲取價格值。 所以現(xiàn)在我們的代碼看起來如下所示，以訪問表格單元格內(nèi)的特定元素。

$(document).ready(function(){

  $("#myTable").on('click', '.btnSelect', function() {
    //獲得當(dāng)前行
    var currentRow = $(this).closest("tr");

    var col1 = currentRow.find(".pd-price").html(); //獲得當(dāng)前行第一個表格單元格TD值
    var col2 = currentRow.find(".pd-name").html(); //獲得當(dāng)前行第二個表格單元格TD值

    var data = col1 + "\n" + col2;

    alert(data);
  });
});

execcodegetcode

4、如何使用jquery獲取所有表行單元格值。

現(xiàn)在我們讀取給定HTML表的所有數(shù)據(jù)。 在實際場景中，我們需要多次將完整的表數(shù)據(jù)發(fā)送到服務(wù)器。即獲取表值并將其存儲在JSON數(shù)組中，然后將其傳遞給服務(wù)器端。 通過使用jquery讀取HTML表數(shù)據(jù)并將其存儲在JSON對象中，非常簡單。 首先，我們創(chuàng)建帶有虛擬數(shù)據(jù)的HTML表和一個執(zhí)行神奇工作的按鈕例如將HTML表數(shù)據(jù)轉(zhuǎn)換為JSON對象。 這就是我們的HTML表格的樣子。

<button id="myButton"> Click Me</button>
<table border='1' id="myTable">
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Description</th>
<th>Action</th>
</tr>
<tr>
<td><span>1</span></td>
<td><strong class='pd-name'>Moto G</strong></td>
<td><p>Moto G next generation smart phone <span class="pd-price">50$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>
<tr>
<td><span>2</span></td>
<td><strong class='pd-name'>Iphone SE</strong></td>
<td><p>Iphone laucnhed new phone bosy of 5s with feature of 6s<span class="pd-price">500$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>

<tr>
<td><span>3</span></td>
<td><strong class='pd-name'>Sony z3</strong></td>
<td><p>This is waterproof, well designed, etc<span class="pd-price">250$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>

<tr>
<td><span>4</span></td>
<td><strong class='pd-name'>Moto X Play</strong></td>
<td><p>Another class product from Moto G Family<span class="pd-price">150$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>

<tr>
<td><span>5</span></td>
<td><strong class='pd-name'>Samsung S7</strong></td>
<td><p>Best smart phone, nice UI etc.<span class="pd-price">450$</span><p></td>
<td>
<button class="btnSelect">Select</button>
</td>
</tr>
</table>

Jquery：用于獲取HTML表數(shù)據(jù)值并保存在JSON對象中的代碼。

這里我們創(chuàng)建一個數(shù)組變量arrData，用于存儲HTML表數(shù)據(jù)。 使用下面編寫的jquery代碼，我們可以將完整的HTML表數(shù)據(jù)保存到j(luò)avascript數(shù)組對象中。

$("#myButton").on('click',function(){

  var arrData=[];
  //循環(huán)每一個表行(tr)
  $("#myTable tr").each(function(){
    var currentRow=$(this);

    var col1_value=currentRow.find("td:eq(0)").text();
    var col2_value=currentRow.find("td:eq(1)").text();
    var col3_value=currentRow.find("td:eq(2)").text();

    var obj={};
    obj.col1=col1_value;
    obj.col2=col2_value;
    obj.col3=col3_value;

    arrData.push(obj);
  });
  alert(arrData);
  console.log(arrData);

});

輸出

execcodegetcode

結(jié)論：本文介紹了如何在按鈕單擊時在jquery中讀取HTML表格單元格TD值的完整教程。 希望你喜歡這個教程。

標(biāo)簽: JQuery  table