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

7950735

浏览: 30046 次
性别:
来自: 宁波

最近访客更多访客>>

dahezi999

_小墨迹_

miemieaile

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery JavaScript CSS HTML

这个表格不是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值,这个用于显示详细信息的。

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

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