Explication détaillée des étapes pour implémenter un tableau avec des cases à cocher à l'aide de jquery

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter une table avec case à cocher en jquery Quelles sont les précautions pour implémenter une table avec case à cocher en jquery ? Voici un cas pratique. Levez-vous et jetez un œil.

Il est simple d'utiliser le tableau grâce à la technologie jquery. Grâce à la syntaxe de jquery, vous pouvez facilement changer la couleur du tableau une ligne sur deux et suspendre la mise en surbrillance. Dans les applications réelles, il peut y avoir des doublons dans le tableau. table. Pour les cases à cocher, lorsque supprime , l'enregistrement dans la ligne où se trouve la case à cocher sera supprimé. Ici, vous pouvez ajouter un effet spécial Lorsque vous cliquez sur une ligne, la case à cocher de la ligne est cochée et la couleur d'arrière-plan de la ligne est également mise en surbrillance. Cela fait du bien.

L'effet est le suivant :

Il y a deux fonctions ici :
Fonction 1. Cliquez sur une ligne, la case à cocher de la ligne est cochée et modifiez-la à en même temps Couleur de fond.
Fonction 2. Changez la couleur de la ligne après avoir cliqué sur l'étiquette Sélectionner tout/Désélectionner tout.
J'ai encapsulé les deux fonctions dans des fichiers js et je les importe simplement lorsque je les utilise.
Regardons d'abord le code CSS. Je l'ai encapsulé dans un fichier CSS

.selected{ 
background
:#FF6500; 
color:#fff; 
}

Regardons le code du fichier js :
Le code de la fonction 1 :

/** 
* 设置含有复选框的表格中的背景色 
*/ 
$(
document
).ready(function() 
{ 
/** 
* 表格行被单击的时候改变背景色 
*/ 
$("#tablight tr:gt(0)").click(function() //获取第2行后 
{ 
if ($(this).hasClass("selected"))//判断是否选中 
{ 
$(this).removeClass("selected").find(":checkbox").attr("checked",false);//选中移除样式 
} 
else//设置选中 
{ 
$(this).addClass("selected").find(":checkbox").attr("checked",true);//未选中添加样式 
} 
}); 
});

Code pour la fonction 2 :

/** 
* 单击全选和反选之后改变背景色 
*/ 
function setColor()//设置tr的背景颜色 
{ 
var checkboxs = $("#tablight tr:gt(0) input[type=checkbox]");//得到所有的复选框 
var boxeds = $("#tablight tr:gt(0) input[type=checkbox]:checked");//得到被选择的复选框 
if(boxeds.length > 0) 
{ 
checkboxs.parent().parent().addClass("selected");//复选框在td里 
} 
else 
{ 
checkboxs.parent().parent().removeClass("selected"); 
} 
}

Si vous souhaitez que le code prenne effet, vous devez ajouter l'attribut id au tableau, la valeur de l'attribut est "tablight", sélectionnez tout /désélectionnez tout en même temps, puis appelez la méthode setColor.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la différence entre JSON.parse() et JSON.stringify() et comment l'utiliser

JS détermine json Quelles sont les méthodes

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!