Utilisez la simple méthode jQuery toggleClass pour changer les couleurs entre rows

Utilisez la simple méthode jQuery toggleClass pour changer les couleurs entre rows_jquery

WBOY

Libérer： 2016-05-16 16:33:11

original

1543 Les gens l'ont consulté

Aujourd'hui, une méthode simple toggleClass() a été utilisée pour implémenter le changement de couleur entrelacé : le code est le suivant :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隔行换色</title>
<script src="js/jquery-1.4.2.min.js"></script>
<style type="text/css">
body,table,td, {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.h {
background:#f3f3f3;
color:#000;
}
.c {
background:#ebebeb;
color:#000;
}
</style>
</head>

<body>
<div id="aaa">
<form>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td width="30" align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
</table>
</form>
</div>
<script>

Copier après la connexion

La première méthode plus compliquée :

$(function()
{
$("#table tr").hover(function()
{
$(this).addClass("h");
},function()
{
$(this).removeClass("h");
})
$("input").click(function()
{
if($(this).attr("checked"))
{
$(this).closest("tr").addClass("c");
}
else
{
$(this).closest("tr").removeClass("c");
}
})
})

Copier après la connexion

La deuxième méthode plus simple :

toggleClass() Bascule la définition ou la suppression d'une ou plusieurs classes d'éléments sélectionnés.

Cette méthode vérifie la classe spécifiée dans chaque élément. Ajoute la classe si elle n'existe pas ou la supprime si elle est définie. C'est ce qu'on appelle un effet bascule.

Cependant, en utilisant le paramètre "switch", vous pouvez spécifier que seules les classes soient supprimées ou uniquement ajoutées.

$(function(){
$("#table tr").hover(function(){
$(this).toggleClass("h");
})

$("input").click(function(){
var d = $(this);
d.closest('tr').toggleClass("c",d.attr("checked")) ;
})
})
</script>
</body>
</html>

Copier après la connexion