JQuery获得table表格单元格TD值的方式

如何在jquery中获取click事件的表单元格值。我们的表格单元格值可能包含简单的文本值或某些HTML元素，例如（div，span，textbox）。如何使用jquery对行选择来读取这些表格单元格值（TD值），例如怎样用jquery获得或访问TD里的div内容。还有看看如何把完整HTML表格数据存储到JSON数组。通过使用jquery，有很多方式可以获得TD里的值，我们准备介绍4种简单方式通过行和列去获得表格单元格数据。
我们必须添加HTML标记，例如我们想要读取其数据的HTML表。 您可以使用JSON数据在jquery中创建动态HTML表，但为了简单起见，我硬编码将HTML表添加为Id，ProductName，Description列，并在其中添加了一些虚拟数据。 这就是我们的HTML标记的样子，如下所示。

<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 click事件。 使用jquery .text()方法我们得到TD值（表格单元格值）。代码如下所示。

$(document).ready(function(){

  //用于读取所选表行单元格数据（值）的代码
  $("#myTable").on('click','.btnSelect',function(){
    //获得当前行
    var currentRow=$(this).closest("tr"); 

    var col1=currentRow.find("td:eq(0)").text(); //获得当前行第一个TD值
    var col2=currentRow.find("td:eq(1)").text(); //获得当前行第二个TD值
    var col3=currentRow.find("td:eq(2)").text(); //获得当前行第三个TD值
    var data=col1+"\n"+col2+"\n"+col3;

    alert(data);
  });
});