如何用jquery抓取tbody下的第一个tr的最后一个td里面的第一个a标签

如何用jquery抓取tbody下的第一个tr的最后一个td里面的第一个a标签,第1张

使用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中的位置等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9772890.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存