jquery遍历table的tr获取td的值(jquery遍历表单元素)
发布网友
发布时间：2024-09-27 04:44
共1个回答
热心网友
时间：2024-10-09 17:57
jquery获取tbody的tr数据
获取tbody里面所有的td值我们可以通过获取tbody这个页面元素下面所有的tr元素，获取后通过遍历的方式来获取所有的td值。
以下面这个HTML代码为例来看一看怎么获取tbody里面所有的td值
HTML代码：
注意，一定要给tbody设置一个id，这样后面才能通过id获得tobody这个网页元素。
jquery代码如下：
这里使用一个list来获取了所有的tr，然后再遍历tr里面的td值。
jQuery怎么遍历表格，获取每一列的值tableclass="tabletable-hover"id="test123"
tr
thwidth="45"选择/th
thwidth="100"驾校名称/th
thwidth="100"合作驾校名称/th
thwidth="100"申请时间/th
thwidth="100"申请状态/th
thwidth="100"操作/th
/tr
tr
tdinputtype="checkbox"name="id"value="1"//td
td中大驾校/td
td潇湘驾校/td
td2016-04-1514:40:20/td
tdclass="tablestate"未处理/td
tdaclass="changebuttonborder-bluebutton-littleupdate"href="#"修改申请状态/a/td
/tr
tr
tdinputtype="checkbox"name="id"value="1"//td
td中大驾校/td
td潇湘驾校/td
td2016-04-1514:40:20/td
tdclass="tablestate"未处理/td
tdaclass="changebuttonborder-bluebutton-littleupdate"href="#"修改申请状态/a/td
/tr
/table
扩展资料：
遍历同胞：
siblings（）：被选中时找到自己的兄弟姐妹，写法有siblings（所有的兄弟姐妹）和siblings（“同级的兄弟姐妹”）。
next（）：被选中时找到自己的下级，写法有??nextAll（找到所有的下级）和next（“找到下一个元素”）和nextuntil（"被选中的元素的范围内的元素"）。
prev(),prevAll()以及prevUntil()方法的工作方式与上面的方法类似，只不过方向相反：它们返回的是前面的同胞元素（在DOM树中沿着同胞元素向后遍历，而不是向前）。
first（）：返回被选中的第一元素?，写法$("divp").first().css("样式")。
last（）：被选中的最后一个元素，写法$("divp").last().css(”样式“)。
eq（）：返回被选中元素中有索引的元素，索引号，是从0开始不是从1开始比如tr.eq(0).id==data.eq[i-1].id或者tr[0].id=data[i-1].id。????
filter（）：删除真正意义上的过滤，写法?$("div").filter("span").hide()。
not（）：就是跟filter（）相反的用法。
jquery怎么获取table中某一行的值
jQuery遍历的eq()方法将匹配元素集缩减值指定index上的一个，index表示元素的位置（最小为0）。所以获取Table第i行第j列的内容可用如下代码
1
$("table").find("tr").eq(i-1).find("td").eq(j-1).text();//注意-1是因为index从0开始计数
实例演示
创建Html元素
divclass="box"
span填写行列数，点击按钮后获取对应位置的数值：/span
divclass="content"
table
trtd1/tdtd2/tdtd3/td/tr
trtd4/tdtd5/tdtd6/td/tr
trtd7/tdtd8/tdtd9/td/tr
/table
/div
第inputtype="text"name="row"行，第inputtype="text"name="col"列inputtype="button"class="btn"value="确定"
/div
添加css样式
div.box{width:300px;height:250px;padding:10px20px;border:4pxdashed#ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;height:100px;margin:10px0;padding:5px20px;border:2pxsolid#ff6666;}
input[type='text']{width:35px;height:30px;border:1pxsolid#99ccff;}
input[type='button']{width:100px;height:30px;margin:10px;border:2pxsolid#ebbcbe;}
.selected{background:#99ccff;}
table{border-collapse:collapse;}
td{padding:5px10px;border:1pxsolidgreen;}
编写jquery代码
$(function(){
$("input:button").click(function(){
row=$("input[name='row']").val()-1;
col=$("input[name='col']").val()-1;
val=$("table").find("tr").eq(row).find("td").eq(col).text();
alert(val);
});
})
观察显示效果
jquery怎么获取第二个元素的值有两种方法可以获取tr下的第二个td元素：
1、使用css选择器，$("trtd:nth-child(2)")。
2、使用遍历函数eq()。
下面就以上两个方法进行实例演示：单击按钮改变所有行的第二个单元格的样式，单击任意行改变该行第二个单元格的样式。
1、HTML结构
table?id?=?"test"
trtd1/tdtd1/tdtd2/tdtd3/td/tr
trtd2/tdtd4/tdtd5/tdtd6/td/tr
trtd3/tdtd7/tdtd8/tdtd9/td/tr
trtd4/tdtd1/tdtd2/tdtd3/td/tr
/table
input?type="button"?id="btn"?value="设置"
2、jquery代码
$(function(){
$("#btn").click(function()?{
$("#test?tr?td:nth-child(2)").addClass('red');
});
$("#test?tr").click(function()?{
$(this).children('td').eq(1).addClass('red');
});
});
热心网友
时间：2024-10-09 17:56
jquery获取tbody的tr数据
获取tbody里面所有的td值我们可以通过获取tbody这个页面元素下面所有的tr元素，获取后通过遍历的方式来获取所有的td值。
以下面这个HTML代码为例来看一看怎么获取tbody里面所有的td值
HTML代码：
注意，一定要给tbody设置一个id，这样后面才能通过id获得tobody这个网页元素。
jquery代码如下：
这里使用一个list来获取了所有的tr，然后再遍历tr里面的td值。
jQuery怎么遍历表格，获取每一列的值tableclass="tabletable-hover"id="test123"
tr
thwidth="45"选择/th
thwidth="100"驾校名称/th
thwidth="100"合作驾校名称/th
thwidth="100"申请时间/th
thwidth="100"申请状态/th
thwidth="100"操作/th
/tr
tr
tdinputtype="checkbox"name="id"value="1"//td
td中大驾校/td
td潇湘驾校/td
td2016-04-1514:40:20/td
tdclass="tablestate"未处理/td
tdaclass="changebuttonborder-bluebutton-littleupdate"href="#"修改申请状态/a/td
/tr
tr
tdinputtype="checkbox"name="id"value="1"//td
td中大驾校/td
td潇湘驾校/td
td2016-04-1514:40:20/td
tdclass="tablestate"未处理/td
tdaclass="changebuttonborder-bluebutton-littleupdate"href="#"修改申请状态/a/td
/tr
/table
扩展资料：
遍历同胞：
siblings（）：被选中时找到自己的兄弟姐妹，写法有siblings（所有的兄弟姐妹）和siblings（“同级的兄弟姐妹”）。
next（）：被选中时找到自己的下级，写法有??nextAll（找到所有的下级）和next（“找到下一个元素”）和nextuntil（"被选中的元素的范围内的元素"）。
prev(),prevAll()以及prevUntil()方法的工作方式与上面的方法类似，只不过方向相反：它们返回的是前面的同胞元素（在DOM树中沿着同胞元素向后遍历，而不是向前）。
first（）：返回被选中的第一元素?，写法$("divp").first().css("样式")。
last（）：被选中的最后一个元素，写法$("divp").last().css(”样式“)。
eq（）：返回被选中元素中有索引的元素，索引号，是从0开始不是从1开始比如tr.eq(0).id==data.eq[i-1].id或者tr[0].id=data[i-1].id。????
filter（）：删除真正意义上的过滤，写法?$("div").filter("span").hide()。
not（）：就是跟filter（）相反的用法。
jquery怎么获取table中某一行的值
jQuery遍历的eq()方法将匹配元素集缩减值指定index上的一个，index表示元素的位置（最小为0）。所以获取Table第i行第j列的内容可用如下代码
1
$("table").find("tr").eq(i-1).find("td").eq(j-1).text();//注意-1是因为index从0开始计数
实例演示
创建Html元素
divclass="box"
span填写行列数，点击按钮后获取对应位置的数值：/span
divclass="content"
table
trtd1/tdtd2/tdtd3/td/tr
trtd4/tdtd5/tdtd6/td/tr
trtd7/tdtd8/tdtd9/td/tr
/table
/div
第inputtype="text"name="row"行，第inputtype="text"name="col"列inputtype="button"class="btn"value="确定"
/div
添加css样式
div.box{width:300px;height:250px;padding:10px20px;border:4pxdashed#ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;height:100px;margin:10px0;padding:5px20px;border:2pxsolid#ff6666;}
input[type='text']{width:35px;height:30px;border:1pxsolid#99ccff;}
input[type='button']{width:100px;height:30px;margin:10px;border:2pxsolid#ebbcbe;}
.selected{background:#99ccff;}
table{border-collapse:collapse;}
td{padding:5px10px;border:1pxsolidgreen;}
编写jquery代码
$(function(){
$("input:button").click(function(){
row=$("input[name='row']").val()-1;
col=$("input[name='col']").val()-1;
val=$("table").find("tr").eq(row).find("td").eq(col).text();
alert(val);
});
})
观察显示效果
jquery怎么获取第二个元素的值有两种方法可以获取tr下的第二个td元素：
1、使用css选择器，$("trtd:nth-child(2)")。
2、使用遍历函数eq()。
下面就以上两个方法进行实例演示：单击按钮改变所有行的第二个单元格的样式，单击任意行改变该行第二个单元格的样式。
1、HTML结构
table?id?=?"test"
trtd1/tdtd1/tdtd2/tdtd3/td/tr
trtd2/tdtd4/tdtd5/tdtd6/td/tr
trtd3/tdtd7/tdtd8/tdtd9/td/tr
trtd4/tdtd1/tdtd2/tdtd3/td/tr
/table
input?type="button"?id="btn"?value="设置"
2、jquery代码
$(function(){
$("#btn").click(function()?{
$("#test?tr?td:nth-child(2)").addClass('red');
});
$("#test?tr").click(function()?{
$(this).children('td').eq(1).addClass('red');
});
});
