jQuery获得表格单元TD值:本文介绍如何在jquery中获取click事件的表单元格值。我们的表格单元格值可能包含简单的文本值或某些HTML元素,例如(div,span,textbox)。所以今天将学习如何使用jquery对行选择来读取这些表格单元格值(TD值),例如怎样用jquery获得或访问TD里的div内容。还有看看如何把完整HTML表格数据存储到JSON数组。通过使用jquery,有很多方式可以获得TD里的值,我们准备介绍4种简单方式通过行和列去获得表格单元格数据。
首先,我们需要在我们的网页head标签中下载并导入最新的jquery库。 您可以从服务器托管的jQuery文件导入,也可以使用百度托管的jQuery文件(推荐)。 让我们前往编码部分,逐步完成每个部分。 例:
jQuery获得表格单元TD值
1、使用jQuery通过点击获得表格单元格TD值
我们在网页中下载并导入Jquery js文件之后,就可以使用jquery函数了。
HTML标记:使用虚拟数据添加HTML表。
接下来,我们必须添加HTML标记,例如我们想要读取其数据的HTML表。 您可以使用JSON数据在jquery中创建动态HTML表,但为了简单起见,我硬编码将HTML表添加为Id,ProductName,Description列,并在其中添加了一些虚拟数据。 这就是我们的HTML标记的样子,如下所示。
Id | Product Name | Description | Action |
---|---|---|---|
1 | Moto G | Moto G next generation smart phone | Select |
2 | Iphone SE | Iphone laucnhed new phone bosy of 5s with feature of 6s | Select |
3 | Sony z3 | This is waterproof, well designed, etc | Select |
4 | Moto X Play | Another class product from Moto G Family | Select |
5 | Samsung S7 | Best smart phone, nice UI etc. | Select |
jQuery:通过点击按钮获得TD值
现在我们在每一行中添加的选择按钮上绑定一个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);
});
});
使用上面的jquery代码,我们能够在按钮单击时读取HTML表格单元格值。 jquery .text()方法将仅返回文本值,即跳过html并仅显示文本数据。
2、如何使用jquery读取包含HTML元素的表格单元格值,即(div,span,textbox)。
HTML标记:使用一些html元素添加HTML表和数据。
在这里,我们将学习如何获取包含HTML内容的HTML表格单元格值。 在实际开发场景中,有时需要从表格单元格中获取HTML内容, 然后将其附加到另一个HTML元素中。 在这里,我们将HTML数据添加到表中。 这就是我们的HTML标记的样子,如下所示。
Id | Product Name | Description | Action |
---|---|---|---|
1 | Moto G | Moto G next generation smart phone | Select |
2 | Iphone SE | Iphone laucnhed new phone bosy of 5s with feature of 6s | Select |
3 | Sony z3 | This is waterproof, well designed, etc | Select |
4 | Moto X Play | Another class product from Moto G Family | Select |
5 | Samsung S7 | Best smart phone, nice UI etc. | Select |
Jquery:在按钮单击时获取HTML元素内部(TD)表格单元格值的代码。
首先,我们在选择按钮上绑定click事件,然后使用jquery .html()方法获取HTML内容。 之前我们使用.text()方法返回表格单元格td值的文本数据。 所以要返回HTML数据,这里我们使用.html()方法获取表格单元格中的所有html数据。 所以现在我们的代码如下所示:
$(document).ready(function(){
//用于读取所选表行单元格数据(值)的代码。
$("#myTable").on('click','.btnSelect',function(){
//获得当前行
var currentRow=$(this).closest("tr");
var col1=currentRow.find("td:eq(0)").html(); //获得当前和第一个表格单元格TD值
var col2=currentRow.find("td:eq(1)").html(); //获得当前和第一个表格单元格TD值
var col3=currentRow.find("td:eq(2)").html(); //获得当前和第一个表格单元格TD值
var data=col1+"\n"+col2+"\n"+col3;
alert(data);
});
});
3、如何使用jquery获取表格单元格特定的span或div HTML内容。
HTML标记:使用一些html元素添加HTML表和数据。
在本节中,我们将看到如何在TD(表格单元格)中获取特定的div或span元素值。 在上一节中已经展示了如何从表格单元格中获取HTML内容,现在我们看到如何使用jquery从表格单元格(TD)中获取特定的HTML元素。 即,如何使用jquery在表行中查找元素或在TD中查找类。
Id | Product Name | Description | Action |
---|---|---|---|
1 | Moto G | Moto G next generation smart phone 50$ | Select |
2 | Iphone SE | Iphone laucnhed new phone bosy of 5s with feature of 6s500$ | Select |
3 | Sony z3 | This is waterproof, well designed, etc250$ | Select |
4 | Moto X Play | Another class product from Moto G Family150$ | Select |
5 | Samsung S7 | Best smart phone, nice UI etc.450$ | Select |
jQuery:使用jquery获取特定HTML元素(div或span)内容的表格单元格值的代码。
由于我们需要访问表TD中的特定div / span内容,我们将使用jquery .find()方法。 使用.find()方法并传递特定HTML元素的类名,我们能够获得特定div / span内容的表格单元格值。 这里我们只想从最后一个表格单元格中获取价格值。 所以现在我们的代码看起来如下所示,以访问表格单元格内的特定元素。
$(document).ready(function(){
$("#myTable").on('click', '.btnSelect', function() {
//获得当前行
var currentRow = $(this).closest("tr");
var col1 = currentRow.find(".pd-price").html(); //获得当前行第一个表格单元格TD值
var col2 = currentRow.find(".pd-name").html(); //获得当前行第二个表格单元格TD值
var data = col1 + "\n" + col2;
alert(data);
});
});
4、如何使用jquery获取所有表行单元格值。
现在我们读取给定HTML表的所有数据。 在实际场景中,我们需要多次将完整的表数据发送到服务器。即获取表值并将其存储在JSON数组中,然后将其传递给服务器端。 通过使用jquery读取HTML表数据并将其存储在JSON对象中,非常简单。 首先,我们创建带有虚拟数据的HTML表和一个执行神奇工作的按钮例如将HTML表数据转换为JSON对象。 这就是我们的HTML表格的样子。
Click Me
Id | Product Name | Description | Action |
---|---|---|---|
1 | Moto G | Moto G next generation smart phone 50$ | Select |
2 | Iphone SE | Iphone laucnhed new phone bosy of 5s with feature of 6s500$ | Select |
3 | Sony z3 | This is waterproof, well designed, etc250$ | Select |
4 | Moto X Play | Another class product from Moto G Family150$ | Select |
5 | Samsung S7 | Best smart phone, nice UI etc.450$ | Select |
Jquery:用于获取HTML表数据值并保存在JSON对象中的代码。
这里我们创建一个数组变量arrData,用于存储HTML表数据。 使用下面编写的jquery代码,我们可以将完整的HTML表数据保存到javascript数组对象中。
$("#myButton").on('click',function(){
var arrData=[];
//循环每一个表行(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);
});
输出
结论:本文介绍了如何在按钮单击时在jquery中读取HTML表格单元格TD值的完整教程。 希望你喜欢这个教程。