自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)
这个表格不是table的表格,而且使用div的ul和li组成的表格形式。
HTML页面效果如下:
?HTML页面代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>tablegird.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="tablegrid.css"><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.tablegrid.js"></script><script type="text/javascript">$(function(){$("#table_grid").tablegrid();});</script> </head> <body><div id="table_grid" style="margin: 10px;height: auto;padding: 10px;"> <dl> <dt>标题1</dt> <dt>标题2<span>1</span></dt> <dt>标题3</dt> <dt>标题4</dt> </dl> <ul> <li><a href="/action.action">1</a></li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body></html>
?
目前功能具有:奇偶行不同色,鼠标滑过颜色效果,单击高亮,双击事件,在每行第一列取a的href值,这个用于显示详细信息的。
以后会不断的更新,不断的增加更多的功能,也希望大家一起来做这件事。
当然了也有问题存在,比如:双击的时候会有单击操作存在,怎么是单击操作不存在还没解决?也请大家提提建议,是这个表格插件更加的完善。