Maison >interface Web >Questions et réponses frontales >Comment masquer plusieurs tds spécifiés dans jquery

Comment masquer plusieurs tds spécifiés dans jquery

青灯夜游
青灯夜游original
2022-06-10 14:09:282629parcourir

Comment masquer plusieurs éléments td spécifiés dans jquery : 1. Ajoutez des attributs de classe à plusieurs éléments td qui doivent être masqués et définissez les valeurs d'attribut sur la même valeur 2. Utilisez l'attribut de classe pour obtenir plusieurs td spécifiés ; éléments, en utilisant la syntaxe "$(". La valeur de l'attribut de classe ")" renverra un objet jQuery contenant plusieurs éléments td spécifiés. 3. Utilisez la fonction hide() pour masquer les éléments td obtenus, la syntaxe est "objet élément td ; .cacher()".

Comment masquer plusieurs tds spécifiés dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.0, ordinateur Dell G3.

Méthode jquery pour masquer plusieurs td spécifiés

1 Ajoutez des attributs de classe à plusieurs éléments td qui doivent être masqués et définissez la valeur de l'attribut sur la même valeur, telle que "box"

<table border="1">
	<tr>
		<th>商品</th>
		<th>价格</th>
	</tr>
	<tr>
		<td class="box">T恤</td>
		<td>¥100</td>
	</tr>
	<tr>
		<td class="box">牛仔褂</td>
		<td class="box">¥250</td>
	</tr>
	<tr>
		<td>牛仔库</td>
		<td>¥150</td>
	</tr>
</table>
.

2. L'utilisation de l'attribut class pour obtenir plusieurs éléments td spécifiés

$(".class属性值")

renverra des objets jQuery contenant plusieurs éléments td spécifiés

3. Utilisez la fonction hide() pour masquer les objets obtenus (éléments td)

td对象.hide()
.

Code d'implémentation :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$(".box").hide();
				});
			});
		</script>
	</head>
	<body>

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

Comment masquer plusieurs tds spécifiés dans jquery

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end

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