recherche

Maison >interface Web >Questions et réponses frontales >Comment masquer la ligne tr dans jquery

Comment masquer la ligne tr dans jquery

青灯夜游
青灯夜游original
2022-04-28 18:00:152560parcourir

Méthode Hide : 1. Utilisez "$("tr:nth-child(n)")" pour sélectionner l'élément tr de la ligne spécifiée, et le paramètre n spécifie le nombre de lignes ; 2. Utilisez hide() ou fadeOut() pour masquer l'élément tr obtenu. L'élément tr a la syntaxe "tr element.hide(valeur en milliseconde)" ou "tr element.fadeOut(valeur en milliseconde)".

Comment masquer la ligne tr dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Méthode jquery pour masquer une ligne tr

Méthode d'implémentation :

  • Utilisez l'instruction $("tr:nth-child(n)") pour sélectionner l'élément tr de la ligne spécifiée

  • Utilisez la méthode hide() ou fadeOut() pour masquer l'élément tr sélectionné

Exemple d'implémentation :

  • Masquer la première rangée d'éléments 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>

Comment masquer la ligne tr dans jquery

Masquer la deuxième rangée d'éléments 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(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>

Comment masquer la ligne tr dans jquery

[Apprentissage recommandé : jQuery tutoriel vidéo, vidéo frontale Web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quelle est la fonction de each() dans jquery ?Article suivant：Quelle est la fonction de each() dans jquery ?

Articles Liés

Voir plus