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

Posted 2022-07-19 知

篇首语：时间会告诉我们，简单的喜欢，最长远；平凡中的陪伴，最安心。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jQuery 全选/反选以及单击行改变背景色实例相关的知识，希望对你有一定的参考价值。

jQuery 全选/反选以及单击行改变背景色实例 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

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

复制代码代码如下: bodymargin: ;padding: ;font size: px;font family:微软雅黑; datagridwidth: %; datagird tr thbackground color:# ; font size: px; datagrid tr th datagrid tr tdborder: px solid #ccc; border collapse:collapse; /* 选中行样式 */ table row selectedbackground:#fff f;

　　我们再来看页面HTML结构

复制代码代码如下: <div id="page"> <table cellpadding=" " cellspacing=" "> <thead> <tr> <th><input id="CheckAll" name=checkall type=checkbox /></th> <th>ID</th> <th>标题</th> <th>发布人</th> <th>发布时间</th> </tr> </thead> <tbody> <tr> <td align=center><input type=checkbox name=check /></td> <td align=center width= %> </td> <td>阿里做对了哪三件事？</td> <td align=center width= %>internet</td> <td align=center width= %> </td> </tr> <tr> <td align=center><input type=checkbox name=check /></td> <td align=center width= %> </td> <td>大盘点被互联网改写的个传统行业</td> <td align=center width= %>internet</td> <td align=center width= %> </td> </tr> <tr> <td align=center><input type=checkbox name=check /></td> <td align=center width= %> </td> <td>如果智能手机市场有变酷派们怎么办？</td> <td align=center width= %>internet</td> <td align=center width= %> </td> </tr> <tr> <td align=center><input type=checkbox name=check /></td> <td align=center width= %> </td> <td>看看福特们是如何抵御谷歌苹果的？</td> <td align=center width= %>internet</td> <td align=center width= %> </td> </tr> </tbody> </table> </div>

　　实现功能）单击行改变背景色

复制代码代码如下: $(" datagrid tbody tr") bind("click" function () var oThis = $(this); if (oThis hasClass("table row selected")) oThis removeClass("table row selected"); oThis children("td:eq( )") children("input[name= check ]") removeAttr("checked"); else oThis addClass("table row selected"); oThis children("td:eq( )") children("input[name= check ]") attr("checked" "checked"); ); cha138/Article/program/Java/Javascript/201311/25501