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

青灯夜游
Libérer: 2022-06-10 14:09:28
original
2631 Les gens l'ont consulté

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>
Copier après la connexion
.

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

$(".class属性值")
Copier après la connexion

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()
Copier après la connexion
.

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal