Heim > Web-Frontend > js-Tutorial > jQuery 全选/反选以及单击行改变背景色实例_jquery

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

WBOY
Freigeben: 2016-05-16 17:30:23
Original
1191 Leute haben es durchsucht

我先把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)全选/反全选功能(未完成,待续)
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage