jquery获取tbody的tr数据
获取tbody里面所有的td值我们可以通过获取tbody这个页面元素下面所有的tr元素,获取后通过遍历的方式来获取所有的td值。
以下面这个HTML代码为例来看一看怎么获取tbody里面所有的td值
HTML代码:
注意,一定要给tbody设置一个id,这样后面才能通过id获得tobody这个网页元素。
jquery代码如下:
这里使用一个list来获取了所有的tr,然后再遍历tr里面的td值。
jQuery怎么遍历表格,获取每一列的值
table class="table table-hover" id="test123"
tr
th width="45"选择/th
th width="100"驾校名称/th
th width="100"合作驾校名称/th
th width="100"申请时间/th
th width="100"申请状态/th
th width="100"操作/th
/tr
tr
tdinput type="checkbox" name="id" value="1" //td
td中大驾校/td
td潇湘驾校/td
td2016-04-15 14:40:20/td
td class="tablestate"未处理/td
tda class="change button border-blue button-little update" href="#"修改申请状态/a/td
/tr
tr
tdinput type="checkbox" name="id" value="1" //td
td中大驾校/td
td潇湘驾校/td
td2016-04-15 14:40:20/td
td class="tablestate"未处理/td
tda class="change button border-blue button-little update" href="#"修改申请状态/a/td
/tr
/table
扩展资料:
遍历同胞:
siblings():被选中时找到自己的兄弟姐妹,写法有siblings(所有的兄弟姐妹)和siblings(“同级的兄弟姐妹”)。
next():被选中时找到自己的下级,写法有 nextAll(找到所有的下级)和next(“找到下一个元素”)和nextuntil("被选中的元素的范围内的元素")。
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
first():返回被选中的第一元素 ,写法 $("div p").first().css("样式") 。
last():被选中的最后一个元素,写法 $("div p").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元素
div class="box"
span填写行列数,点击按钮后获取对应位置的数值:/span
div class="content"
table
trtd1/tdtd2/tdtd3/td/tr
trtd4/tdtd5/tdtd6/td/tr
trtd7/tdtd8/tdtd9/td/tr
/table
/div
第input type="text" name="row"行,第input type="text" name="col"列input type="button" class="btn" value="确定"
/div
添加css样式
div.box{width:300px;height:250px;padding:10px 20px;border:4px dashed #ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}
input[type='text']{width:35px;height:30px;border:1px solid #99ccff;}
input[type='button']{width:100px;height:30px;margin:10px;border:2px solid #ebbcbe;}
.selected{background:#99ccff;}
table{border-collapse:collapse;}
td{padding:5px 10px;border:1px solid green;}
编写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选择器,$("tr td: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');
});
});