html取出单元格中的数值_jQuery获得Table表格单元格TD值的4种方式

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标记的样子,如下所示。

IdProduct NameDescriptionAction
1Moto GMoto G next generation smart phoneSelect
2Iphone SEIphone laucnhed new phone bosy of 5s with feature of 6sSelect
3Sony z3This is waterproof, well designed, etcSelect
4Moto X PlayAnother class product from Moto G FamilySelect
5Samsung S7Best 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标记的样子,如下所示。

IdProduct NameDescriptionAction
1Moto GMoto G next generation smart phone

Select

2Iphone SEIphone laucnhed new phone bosy of 5s with feature of 6s

Select

3Sony z3This is waterproof, well designed, etc

Select

4Moto X PlayAnother class product from Moto G Family

Select

5Samsung S7Best 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中查找类。

IdProduct NameDescriptionAction
1Moto G

Moto G next generation smart phone 50$

Select

2Iphone SE

Iphone laucnhed new phone bosy of 5s with feature of 6s500$

Select

3Sony z3

This is waterproof, well designed, etc250$

Select

4Moto X Play

Another class product from Moto G Family150$

Select

5Samsung 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

IdProduct NameDescriptionAction
1Moto G

Moto G next generation smart phone 50$

Select

2Iphone SE

Iphone laucnhed new phone bosy of 5s with feature of 6s500$

Select

3Sony z3

This is waterproof, well designed, etc250$

Select

4Moto X Play

Another class product from Moto G Family150$

Select

5Samsung 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值的完整教程。 希望你喜欢这个教程。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值