communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jQuery 全选/反选以及单击行改变背景色实例_jquery

jQuery 全选/反选以及单击行改变背景色实例_jquery

WBOY
Libérer： 2016-05-16 17:30:23
original
1186 Les gens l'ont consulté

我先把CSS样式放出来，其实这个可以直接忽略

复制代码 代码如下:

body{margin:0;padding:0;font-size:12px;font-family:微软雅黑;}
.datagrid{width:100%;}
.datagird tr th{background-color:#191970; font-size:14px;}
.datagrid tr th, .datagrid tr td{border:1px solid #ccc; border-collapse:collapse;}
/* 选中行样式 */
.table-row-selected{background:#fff68f;}

我们再来看页面HTML结构
复制代码 代码如下:










































ID 标题 发布人 发布时间
1 阿里做对了哪三件事？ internet 2013-07-01
2 大盘点：被互联网改写的16个传统行业 internet 2013-07-01
3 如果智能手机市场有变，酷派们怎么办？ internet 2013-07-01
4 看看福特们是如何抵御谷歌苹果的？ internet 2013-07-01



实现功能
1）单击行改变背景色
复制代码 代码如下:

$(".datagrid tbody tr").bind("click", function () {
var oThis = $(this);
if (oThis.hasClass("table-row-selected")) {
oThis.removeClass("table-row-selected");
oThis.children("td:eq(0)").children("input[name='check']").removeAttr("checked");
} else {
oThis.addClass("table-row-selected");
oThis.children("td:eq(0)").children("input[name='check']").attr("checked", "checked");
}
});

2）全选/反全选功能（未完成，待续）
Étiquettes associées：
jquery 全选 Contre-élection
source：php.cn
Article précédent：jquery select多选框的左右移动 具体实现代码_jquery Article suivant：jquery 多行文本框(textarea)高度变化_jquery
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
Derniers articles par auteur
Derniers numéros
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...
Depuis 2024-04-04 12:53:48
0
1
303
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal