使用jquery提供的两个选择器实现:
:first 选择器选取第一个元素
:last 选择器选取最后一个元素。
因此,抓取tbody下的第一个tr的最后一个td里面的第一个a标签可以使用如下代码:
$("table tr:first td:last a:first");实例演示:隐藏tbody下的第一个tr的最后一个td里面的第一个a标签
创建Html元素
<div class="box"><span>点击按钮隐藏第一个a标签:</span><br>
<div class="content">
<table>
<tbody>
<tr><td>打酱油</td><td>打酱油</td><td><a>第1个a标签</a><a>第2个a标签</a><a>第3个a标签</a></td></tr>
<tr><td>打酱油</td><td>打酱油</td><td>第1个a标签</a><a>第2个a标签</a><a>第3个a标签</td></tr>
<tr><td>打酱油</td><td>打酱油</td><td>打酱油</td></tr>
</tbody>
</table>
</div>
<input type="button" value="隐藏第一个a标签">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}divbox span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
table{border-collapse:collapse;}
td{height:30px;line-height:30px;padding:5px; text-align:center;border:1px solid green;}
编写jquery代码
$(function(){$(":button")click(function() {
$("table tr:first td:last a:first")hide();
});
})
观察效果
初始样式
点击按钮隐藏第一行最后一列第一个a标签
$(tbody)find('tr')eq(1)find('td')eq(2);
这条代码取的是第1个tr的第2个td
你可以用$(tbody)find('tr')size()取所有tr
然后在循环中取第二个td
有两种方法可以获取tr下的第二个td元素:
1、使用css选择器,$("tr td:nth-child(2)")。
2、使用遍历函数eq()。
下面就以上两个方法进行实例演示:单击按钮改变所有行的第二个单元格的样式,单击任意行改变该行第二个单元格的样式。
1、HTML结构
<table id = "test">
<tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>4</td><td>1</td><td>2</td><td>3</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'); });});给表格tr绑定点击事件即可,详细代码如下:
$('#table3 tr')on('click', function(){
$(this)css('background-color','lightblue')
})
以上就是关于如何用jquery抓取tbody下的第一个tr的最后一个td里面的第一个a标签全部的内容,包括:如何用jquery抓取tbody下的第一个tr的最后一个td里面的第一个a标签、jQuery怎么取到每个tr里的第二个td、jquery 怎么得到当前tr在当前table中的位置等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)