Maison > interface Web > js tutoriel > Explication détaillée des étapes pour implémenter un tableau avec des cases à cocher à l'aide de jquery

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

php中世界最好的语言
Libérer: 2018-04-25 10:42:01
original
3578 Les gens l'ont consulté

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 :
Explication détaillée des étapes pour implémenter un tableau avec des cases à cocher à l'aide de jquery
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; 
}
Copier après la connexion

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);//未选中添加样式 
} 
}); 
});
Copier après la connexion

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"); 
} 
}
Copier après la connexion

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!

É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