jQuery怎么遍历表格,获取每一列的值

 我来答
固若老唐
2018-11-28 · 原神攻略、整活、抽卡、娱乐博主
固若老唐
采纳数:31 获赞数:16458

向TA提问 私信TA
展开全部

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

<td><input type="checkbox" name="id" value="1" /></td>
<td>中大驾校</td>
<td>潇湘驾校</td>
<td>2016-04-15 14:40:20</td>
<td class="tablestate">未处理</td>
<td><a class="change button border-blue button-little update" href="#">修改申请状态</a></td>

</tr>

<tr>

<td><input type="checkbox" name="id" value="1" /></td>
<td>中大驾校</td>
<td>潇湘驾校</td>
<td>2016-04-15 14:40:20</td>
<td class="tablestate">未处理</td>
<td><a 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()相反的用法。

ml4w5
2016-07-20 · TA获得超过1394个赞
知道小有建树答主
回答量:625
采纳率:25%
帮助的人:647万
展开全部

可以用jQ的each方法遍历表格,再用index()次序值判断第几列,效果实现如下图(获取第一列):

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {width: 60%; margin: 60px auto; border-collapse: collapse; font-size: 12px;}
table td {padding: 1em 2em; border: 1px solid #ccc;}
p {width: 60%; margin: 0 auto;}
</style>
<script src="jquery-164.min.js"></script>
<script>
$(function() {
$('#Table1 tr').find('td').each(function() {
if ($(this).index() == "0") { // 假设要获取第一列的值
$('#Result').append($(this).text() + ',');
}
});
});
</script>
</head>
<body>
<table id="Table1">
<tr>
<td>一行1列</td>
<td>一行2列</td>
<td>一行3列</td>
<td>一行4列</td>
</tr>
<tr>
<td>二行1列</td>
<td>二行2列</td>
<td>二行3列</td>
<td>二行4列</td>
</tr>
<tr>
<td>三行1列</td>
<td>三行2列</td>
<td>三行3列</td>
<td>三行4列</td>
</tr>
</table>
<p>表格第一列的文字内容分别为:<b id="Result"></b></p>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2015-01-26
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title>Nothing</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
    {
    $ ('table tr td').each (function ()
    {
    alert (this.innerHTML);
    })
    })
</script>
</head>
<body>
</body>
</html>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
wwtiger39
2015-01-26 · TA获得超过300个赞
知道小有建树答主
回答量:74
采纳率:0%
帮助的人:97.8万
展开全部
<script type="text/javascript">
$(function() {
$('#Table1 tr').each(function() {
var v=$(this).find("td").eq(0) // 如果当前是第一列
$('#Result').append(v.text() + ',');
});
});
</script>

<table id="Table1">
<tr>
<td>一行1列</td>
<td>一行2列</td>
<td>一行3列</td>
<td>一行4列</td>
</tr>
<tr>
<td>二行1列</td>
<td>二行2列</td>
<td>二行3列</td>
<td>二行4列</td>
</tr>
<tr>
<td>三行1列</td>
<td>三行2列</td>
<td>三行3列</td>
<td>三行4列</td>
</tr>
</table>
<p>表格第一列的文字内容分别为:<b id="Result"></b></p>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式