源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Jquery 实现table样式的设定

  • 时间:2020-03-20 13:19 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Jquery 实现table样式的设定
上一篇我们使用jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看《锋利的Jquery》,说实话正在看了。由于正在学习中,我就想把项目中经常要用的jquery效果自己写成通用方法,可以在大家的帮助下完善这些方法,也可以让不会的了解到一种做法,最后形成自己的Jquery 方法库,方便以后的使用,这些例子都是我自己写的,没有参考,所以有很多地方需要改进。 [b]1:为什么要写这个方法[/b] 在项目中,一些table都要设置样式,为了样式的美观,表头是一个样式,奇数行一个样式,偶数行一个样式。当鼠标经过的时候颜色变化,鼠标离开时颜色恢复,这就有了这样方法。 [b]2:实现过程[/b] js文件xs_table_css.js
[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]"> <head>     <title></title>     <link href="xs_table.css" rel="stylesheet" type="text/css" />     <script src="[url=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js]http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js[/url]" type="text/javascript">     </script>     <script src="xs_table_css.js" type="text/javascript"></script> </head> <body> <table class="xs_table" width="800px"> <tbody > <tr><th>headone</th><th>headTwo</th></tr> <tr><td>第一行</td><td>111111111</td></tr> <tr><td>第二行</td><td>222222222</td></tr> <tr><td>第三行</td><td>333333333</td></tr> <tr><td>第四行</td><td>444444444</td></tr> </tbody> </table> <br /> <br /> <table class="xs_table" width="800px"> <tr><th>headone</th><th>headTwo</th></tr> <tr><td>第一行</td><td>111111111</td></tr> <tr><td>第二行</td><td>222222222</td></tr> <tr><td>第三行</td><td>333333333</td></tr> <tr><td>第四行</td><td>444444444</td></tr> </table> </body> </html>
3:方法说明   (1)mouseover和mouseout要先移除上次的css,不然会出现样式叠加   (2)找tr时注意tbody,虽然页面上没有tbody标签,但是默认会有这个子元素   (3)奇偶行要去除th,只找td的
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部