欢迎光临
我们一直在努力

jquery如何隐藏第一个tr

本篇内容主要讲解“jquery如何隐藏第一个tr”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery如何隐藏第一个tr”吧!

隐藏方法:1、利用“:first”选择器获取第一个tr元素,语法“$("tr:first")”;2、利用hide()或fadeOut()来隐藏获取到的tr元素,语法“tr元素.hide(毫秒值)”或“tr元素.fadeOut(毫秒值)”。

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

tr元素

<tr> 标签定义 HTML 表格中的行。

一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。

jquery隐藏第一个tr的方法

实现思路:

  • 获取表格的第一个tr元素

  • 将获取到的tr元素隐藏

实现方法:

  • 可以利用:first选择器获取第一个tr元素

  • 可以利用hide()或fadeOut()方法来隐藏被选元素

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("tr:first").hide(1000); 
					//$("tr:first").fadeOut(1000);
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<table border="1">
			<tr>
				<th>商品</th>
				<th>价格</th>
			</tr>
			<tr>
				<td>T恤</td>
				<td>¥100</td>
			</tr>
			<tr>
				<td>牛仔褂</td>
				<td>¥250</td>
			</tr>
			<tr>
				<td>牛仔库</td>
				<td>¥150</td>
			</tr>
		</table><br>
		<button>隐藏第一个tr</button>
	</body>

</html>

到此,相信大家对“jquery如何隐藏第一个tr”有了更深的了解,不妨来实际操作一番吧!这里是云搜网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。