专栏首页sktjjquery 表格样式 交替颜色 选中换色

jquery 表格样式 交替颜色 选中换色

image.png

style.css

table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even { background:#FFF38F;} /* 偶数行样式/ .odd { background:#FFFFEE;} / 奇数行样式*/ .selected { background:#FF6500;color:#fff;}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript">

("tbody>tr:odd").addClass("odd");

('tbody>tr').click(function() { //判断当前是否选中 var hasSelected=

(this)hasSelected?"removeClass":"addClass" //查找内部的checkbox,设置对应的属性。 .find(':checkbox').attr('checked',!hasSelected); }); // 如果复选框默认情况下是选择的,则高色. $('tbody>tr:has(:checked)').addClass('selected'); }) </script> </head> <body> <table> <thead> <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="checkbox" name="choice" value=""/></td> <td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td> <td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>找六</td><td>男</td><td>浙江温州</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table> </body> </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 预防XSS,这几招管用!

    大家应该都听过 XSS (Cross-site scripting) 攻击问题,或多或少会有一些了解,但貌似很少有人将这个问题放在心上。一部分人是存有侥幸心理:...

    黄泽杰
  • IT兄弟连 JavaWeb教程 JSTL常用标签

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    ITXDL
  • IT兄弟连 HTML5教程 HTML5的靠山 RFC、WHATWG是什么WEB的新标准

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    ITXDL
  • 「首席架构师推荐」React生态系统大集合

    首席架构师智库
  • 90行代码,15个元素实现无限滚动

    无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。

    前端劝退师
  • IT兄弟连 JavaWeb教程 文件上传技术

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    ITXDL
  • ASP.NET Core 2.2 : 二十一. 内容协商与自定义IActionResult和格式化类

    上一章的结尾留下了一个问题:同样是ObjectResult,在执行的时候又是如何被转换成string和JSON两种格式的呢?

    FlyLolo
  • 几个IDEA的NB插件,还带动态图的。

    一款热部署插件,只要不是修改了项目的配置文件,用它都可以实现热部署。收费的,破解比较麻烦。不过功能确实很强大。算是开发必备神器了。热部署快捷键是control+...

    好好学java
  • 基础知识 | 每日一练(120)

    小林:老版的 toupper() 和 tolower() 不一定能够正常处理不需要转换的字符参数,例如数字、标点或已经符合请求的字符。在 ANSI/ISO 标准...

    闫小林
  • 后selenium时代Web UI自动化测试框cypress

    优点:selenium 的 API 封装遵循 W3C 提供的 webdriver 标准,很好的支持主流浏览器chrome,firefox,IE,Safari等,...

    测试邦

扫码关注云+社区

领取腾讯云代金券