jqueryでtr行を非表示にする方法-フロントエンドQ&A-php.cn

jqueryでtr行を非表示にする方法

青灯夜游

リリース： 2022-04-28 18:04:20

オリジナル

2527 人が閲覧しました

Hide メソッド: 1. "$("tr:nth-child(n)")" を使用して、指定した行の tr 要素を選択し、パラメーター n で行数を指定します。 Hide() または fadeOut() 取得した tr 要素を非表示にする場合は、「tr 要素.hide(ミリ秒値)」または「tr 要素.fadeOut(ミリ秒値)」の構文となります。

jqueryでtr行を非表示にする方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery で tr の行を非表示にする方法

実装方法:

使用$ ("tr:nth-child(n)")ステートメントは指定された行の tr 要素を選択します
hide() または fadeOut() メソッドを使用します選択した tr 要素を非表示にする

実装例:

tr 要素の最初の行を非表示にする

<!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:nth-child(1)").hide(1000); 
					//$("tr:nth-child(1)").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行を非表示にする方法

tr 要素の 2 行目を非表示にする

<!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:nth-child(2)").hide(1000); 
					$("tr:nth-child(2)").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行を非表示にする方法