首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

从做jQuery插件-表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)

2012-10-31 
自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)这个表格不是table的表格,而且使用div的

自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)

这个表格不是table的表格,而且使用div的ul和li组成的表格形式。
HTML页面效果如下:

从做jQuery插件-表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)
?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值,这个用于显示详细信息的。

以后会不断的更新,不断的增加更多的功能,也希望大家一起来做这件事。

当然了也有问题存在,比如:双击的时候会有单击操作存在,怎么是单击操作不存在还没解决?也请大家提提建议,是这个表格插件更加的完善。

热点排行