Maison > Article > interface Web > Comment masquer plusieurs tds spécifiés dans jquery
Comment masquer plusieurs tds spécifiés dans jquery
- 青灯夜游original
- 2022-06-10 14:09:282607parcourir
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()".
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>
【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!