jquery table

open-open.com 看到N多老外写的插件 

于是今天看了下jquery文档也自己来两个，献丑啦！ 

需求: 

一：操作table 
1、无侵入式可编辑 

2、隔行换色 

3、拉动表头，自定义宽度 

4、可编辑 

5、编辑后的数据颜色区分 

5、css文件自己定义，无需和插件绑定，这样更加灵活 

6、一切可配置 


1：名字就叫bestTable 

二:拖动div 

万恶的IE6，在自定义的js文件中有时候加备注会让IE6报错，我非常蛋疼，可能是中文注释的原因所以键盘事件的代码取消了注释，一切正常，只要在一写备注ie6就运行不了， 

jquery.bestTable.js 

Js代码 

1. (function($){      

2.     $.fn.bestTable = function(options)   

3.     {      

4. /** 

5.          * isDrog 是否可以拖动表头宽度 

6.          * oddtrBackgroundColor odd背景颜色 

7.          * isEffect 是否开启鼠标特效 

8.          * effectBackgroundColor 鼠标移动后的背景色 

9.          * isEditor 是否开启可编辑状态 

10.          * isEditorNewColor 编辑状态背景色 

11.          * isEditorNewColor 是否开启编辑后状态 

12.          * editorNewColorBackgroundColor 编辑后背景色 

13.          */

14. var defaults = {   

15.             isDrog : true,   

16.             oddtrBackgroundColor:"#EEE",   

17.             isEffect:true,   

18.             effectBackgroundColor:"#CCCCCC",   

19.             isEditor:true,   

20.             editorBackgroundColor:"#FFFFCC",   

21.             isEditorNewColor:true,   

22.             editorNewColorBackgroundColor : "0099FF"

23.         };   

24. var opts = $.extend(defaults, options);   

25. var backgroundColor='background-color';   

26.         $(this).each(function()   

27.         {   

28. //获取当前table 

29. var newTable= $(this);   

30. //是否允许拖动表头 

31. if(opts.isDrog)drog(newTable); //鼠标拖动th 

32.             $(newTable).find("tbody tr:odd").css(backgroundColor,opts.oddtrBackgroundColor);   

33. //获取当前table中tbody中的td 

34. var newtd = $(newTable).find('tbody td');   

35. //编辑状态(鼠标变手形)和鼠标特效状态(改变背景色)都需要给当前td设置mouseover 

36.             newtd.mouseover(function(){   

37. //保存当前td的背景色 

38. var oldbackgroundColor=$(this).css(backgroundColor);   

39. if(opts.isEffect)//启动特效状态 

40.                 {   

41.                     $(this).css({'cursor':'pointer',backgroundColor:opts.effectBackgroundColor});//修改鼠标为手状、修改背景色 

42.                     $(this).mouseout(function(){   

43.                         $(this).css({backgroundColor:oldbackgroundColor}); //光标移开后恢复到最初背景色 

44.                     });   

45.                 }   

46.             });   

47. //不允许编辑 

48. if(!opts.isEditor)returnfalse;   

49. //单击td 

50.             newtd.click(function(){   

51. var td = $(this);   

52. //判断当前td中是否已经包含了inpu文本框 

53. if(td.children("input").length>0){returnfalse};   

54. //为当前td添加一个编辑框临时input    

55. var inputObject = $("<input type='text'/>").height("100%").width("100%").css({      

56. "font-size":td.css("font-size"),      

57.                         backgroundColor:opts.editorBackgroundColor,      

58. "border-width":0      

59.                     });   

60. //取消当前input文本框单击事件    

61.                     inputObject.click(function(){returnfalse});      

62. //获取td文本框放入一个变量 

63. var tdText = td.html();   

64. //将td中的文本框赋值给input中    

65.                     inputObject.val(tdText);   

66. //将input放入td文本框当中    

67.                     td.html(inputObject);   

68. //选中编辑区域 兼容所有浏览器    

69.                     inputObject.trigger("focus").trigger("select");   

70.                     inputObject.blur(function(){    

71. //恢复td的文本    

72.                         td.html(tdText);      

73. //删除input    

74.                         $(this).remove();      

75.                     });   

76. //键盘   

77.                     inputObject.keydown(function(event){      

78. var keyCode = event.which;   

79. switch(keyCode){      

80. case 13:   

81. var inputText = $(this).val();      

82.                             td.html(inputText);      

83.                             $(this).remove();      

84. if(!opts.isEditorNewColor)returnfalse;      

85.                             td.css(backgroundColor,opts.editorNewColorBackgroundColor);   

86. break;      

87. case 27:    

88.                             td.html(tdText);        

89.                             $(this).remove();        

90. break;      

91.                         }      

92.                     });          

93.             });   

94.         });   

95. //很少的代码实现拖动表头 

96. function drog(table){   

97. var tr = $(table).find("thead tr");   

98. var th = $(table).find('thead tr th');   

99.             $(tr).mousemove(function(event){   

100.                 $(this).css("cursor","e-resize");   

101.             });   

102.             $(th).mousedown(function(event){   

103.                 $(this).mousemove(function(e){   

104. var width = $(this).width();   

105. var px = e.clientX-event.clientX;   

106.                     $(this).width(width+px);   

107.                 });   

108.             });   

109.             $(th).mouseup(function(){   

110.                 $(th).unbind('mousemove');   

111.             });    

112.         }   

113.     };      

114. })(jQuery);    

(function($){   
	
    $.fn.bestTable = function(options)
    {   
        /**
         * isDrog 是否可以拖动表头宽度
       	 * oddtrBackgroundColor odd背景颜色
       	 * isEffect 是否开启鼠标特效
       	 * effectBackgroundColor 鼠标移动后的背景色
       	 * isEditor 是否开启可编辑状态
       	 * isEditorNewColor 编辑状态背景色
       	 * isEditorNewColor 是否开启编辑后状态
       	 * editorNewColorBackgroundColor 编辑后背景色
       	 */
		var defaults = {
			isDrog : true,
			oddtrBackgroundColor:"#EEE",
			isEffect:true,
			effectBackgroundColor:"#CCCCCC",
			isEditor:true,
			editorBackgroundColor:"#FFFFCC",
			isEditorNewColor:true,
			editorNewColorBackgroundColor : "0099FF"
		};
		var opts = $.extend(defaults, options);
		
       
      	var backgroundColor='background-color';
		$(this).each(function()
		{
			
			
			//获取当前table
			var newTable= $(this);
			//是否允许拖动表头
			if(opts.isDrog)drog(newTable); //鼠标拖动th
			
			$(newTable).find("tbody tr:odd").css(backgroundColor,opts.oddtrBackgroundColor);
			//获取当前table中tbody中的td
			var newtd = $(newTable).find('tbody td');
			
			//编辑状态(鼠标变手形)和鼠标特效状态(改变背景色)都需要给当前td设置mouseover
			newtd.mouseover(function(){
				//保存当前td的背景色
				var oldbackgroundColor=$(this).css(backgroundColor);
				if(opts.isEffect)//启动特效状态
				{
					
					$(this).css({'cursor':'pointer',backgroundColor:opts.effectBackgroundColor});//修改鼠标为手状、修改背景色
					
					$(this).mouseout(function(){
						$(this).css({backgroundColor:oldbackgroundColor}); //光标移开后恢复到最初背景色
					});
				}
			});
			
			//不允许编辑
			if(!opts.isEditor)return false;
			//单击td
			newtd.click(function(){
				var td = $(this);
				//判断当前td中是否已经包含了inpu文本框
				if(td.children("input").length>0){return false};
				//为当前td添加一个编辑框临时input   
                    var inputObject = $("<input type='text'/>").height("100%").width("100%").css({   
                        "font-size":td.css("font-size"),   
                        backgroundColor:opts.editorBackgroundColor,   
                        "border-width":0   
                    });
                    //取消当前input文本框单击事件   
                    inputObject.click(function(){return false});   
                    //获取td文本框放入一个变量
                    var tdText = td.html();
                    //将td中的文本框赋值给input中   
                    inputObject.val(tdText);
                    //将input放入td文本框当中   
                    td.html(inputObject);
                    //选中编辑区域 兼容所有浏览器   
                    inputObject.trigger("focus").trigger("select");
                    
                    
                    inputObject.blur(function(){ 
                        //恢复td的文本   
                        td.html(tdText);   
                        //删除input   
                        $(this).remove();   
                    });
                    
                    //键盘  
                    inputObject.keydown(function(event){   
                        var keyCode = event.which;
                        switch(keyCode){   
                            case 13:
                            var inputText = $(this).val();   
                            td.html(inputText);   
                            $(this).remove();   
                            if(!opts.isEditorNewColor)return false;   
                            td.css(backgroundColor,opts.editorNewColorBackgroundColor);
                            break;   
                            case 27: 
                            td.html(tdText);     
                            $(this).remove();     
                            break;   
                        }   
       
                    });       
			});
			
			
		});
        //很少的代码实现拖动表头
		function drog(table){
			
			var tr = $(table).find("thead tr");
			
			var th = $(table).find('thead tr th');
			
			$(tr).mousemove(function(event){
				
				$(this).css("cursor","e-resize");
				
			});
			
			$(th).mousedown(function(event){
				
				$(this).mousemove(function(e){

					var width = $(this).width();
					
					var px = e.clientX-event.clientX;
					
					$(this).width(width+px);

				});
				
			});
			$(th).mouseup(function(){
				
				$(th).unbind('mousemove');
				
			});	
		}
    };   
	
})(jQuery);  

页面 引入 jquery.js 和 自定义的 jquery.bestTable.js 

Html代码 

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

2. <html>

3. <head>

4. <title>a.html</title>

5. <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

6. <metahttp-equiv="description"content="this is my page">

7. <metahttp-equiv="content-type"content="text/html; charset=UTF-8">

8. <scripttype="text/javascript"src="js/jquery.min.js"></script>

9. <scripttype="text/javascript"src="js/jquery.bestTable.js"></script>

10. <scripttype="text/javascript">

11.         $(document).ready(function()      

12.         {      

13.             //最简单配置  默认配置      

14.             $('table#demo').bestTable();      

15.             //按需求配置      

16.             $('table#demo2').bestTable({      

17.                 isDrog:false, //不允许拖动表头宽度   

18.                 oddtrBackgroundColor:'red', //改变odd背景色      

19.                 isEffect:false, //关闭鼠标滑动特效      

20.                 isEditorNewColor:false //编辑完成后不改变背景色      

21.             });      

22.         });      

23. </script>

24. <style>

25.         table {   

26.           border: solid 1px #D5D5D5;   

27.           border-collapse: collapse;   

28.           height:auto;   

29.         }   

30.         tbody td {   

31.             border:1px solid #D5D5D5;   

32.             font-size:12px;   

33.         }   

34.         thead th {   

35.             border:1px solid #D5D5D5;   

36.             background-color:#EEE;   

37.             font-size:12px;   

38.         }   

39. </style>

40. </head>

41. <body>

42. <!-- demo -->

43. <tableid="demo">

44. <thead>

45. <tr>

46. <th>userName</th>

47. <th>email</th>

48. <th>sex</th>

49. </tr>

50. </thead>

51. <tbody>

52. <tr>

53. <td>胡**</td>

54. <td>[e-mail]</td>

55. <td>男</td>

56. </tr>

57. <tr>

58. <td>胡**</td>

59. <td>[e-mail]</td>

60. <td>男</td>

61. </tr>

62. <tr>

63. <td>胡**</td>

64. <td>[e-mail]</td>

65. <td>男</td>

66. </tr>

67. <tr>

68. <td>胡**</td>

69. <td>[e-mail]</td>

70. <td>男</td>

71. </tr>

72. </tbody>

73. </table>

74. <br/>

75. <!-- demo2 -->

76. <tableid="demo2">

77. <thead>

78. <tr>

79. <th>userName</th>

80. <th>email</th>

81. <th>sex</th>

82. </tr>

83. </thead>

84. <tbody>

85. <tr>

86. <td>xiaomaha</td>

87. <td>[e-mail]</td>

88. <td>男</td>

89. </tr>

90. <tr>

91. <td>xiaomaha2</td>

92. <td>[e-mail]</td>

93. <td>男</td>

94. </tr>

95. <tr>

96. <td>xiaomaha3</td>

97. <td>[e-mail]</td>

98. <td>男</td>

99. </tr>

100. <tr>

101. <td>xiaomaha4</td>

102. <td>[e-mail]</td>

103. <td>男</td>

104. </tr>

105. </tbody>

106. </table>

107. <spanid="a"></span><br/><spanid="b"></span><br/><spanid="c"></span><br/><spanid="d"></span><br/>

108. </body>

109. </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a.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">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.bestTable.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function()   
        {   
            //最简单配置  默认配置   
            $('table#demo').bestTable();   
               
               
            //按需求配置   
            $('table#demo2').bestTable({   
            	isDrog:false, //不允许拖动表头宽度
                oddtrBackgroundColor:'red', //改变odd背景色   
                isEffect:false, //关闭鼠标滑动特效   
                isEditorNewColor:false //编辑完成后不改变背景色   
            });   
        });   

	</script>

	<style>
		
		table {
		  border: solid 1px #D5D5D5;
		  border-collapse: collapse;
		  
		  height:auto;
  
		}

		tbody td {
			border:1px solid #D5D5D5;
			font-size:12px;
		}

		thead th {
			border:1px solid #D5D5D5;
			background-color:#EEE;
			font-size:12px;
		
		}
	</style> 

  </head>
  
  <body>
  	
  <!-- demo -->
  		<table id="demo">
     	<thead>
     		<tr>
     			<th>userName</th>
     			<th>email</th>
     			<th>sex</th>
     		</tr>
     	</thead>
     	<tbody>
     		<tr>
     			<td>胡**</td>
     			<td>[e-mail]</td>
     			<td>男</td>
     		</tr>
     		<tr>
     			<td>胡**</td>
     			<td>[e-mail]</td>
     			<td>男</td>
     		</tr>
     		<tr>
     			<td>胡**</td>
     			<td>[e-mail]</td>
     			<td>男</td>
     		</tr>
     		<tr>
     			<td>胡**</td>
     			<td>[e-mail]</td>
     			<td>男</td>
     		</tr>
     	</tbody>
     </table>
  
  
  <br/>
  <!-- demo2 -->
  	
     <table id="demo2">
     	<thead>
     		<tr>
     			<th>userName</th>
     			<th>email</th>
     			<th>sex</th>
     		</tr>
     	</thead>
     	<tbody>
     		<tr>
     			<td>xiaomaha</td>
     			<td>[e-mail]</td>
     			<td>男</td>
     		</tr>
     		<tr>
     			<td>xiaomaha2</td>
     			<td>[e-mail]</td>
     			<td>男</td>
     		</tr>
     		<tr>
     			<td>xiaomaha3</td>
     			<td>[e-mail]</td>
     			<td>男</td>
     		</tr>
     		<tr>
     			<td>xiaomaha4</td>
     			<td>[e-mail]</td>
     			<td>男</td>
     		</tr>
     	</tbody>
     </table>
     <span id="a"></span><br/><span id="b"></span><br/><span id="c"></span><br/><span id="d"></span><br/>
  </body>
</html>

显示结果 



拖动表头宽度 



编辑状态改变背景色 


编辑后回车 被编辑过的td会改变颜色 




---------------------bestTableOver------------------ 

可拖动的div 

Js代码 

1. (function($){    

2.     $.fn.bestDrag = function(options)   

3.     {   

4. var defaults = {   

5.         }   

6. var opts = $.extend(defaults, options);   

7. this.each(function()   

8.         {   

9. var tag = $(this);   

10.             drog(tag);   

11.         });   

12. //到处乱拖 

13. function drog(tag){   

14.             $(tag).mousedown(function(e){   

15.                  $(this).css("cursor","move");   

16. var offset = $(this).offset();   

17. var x = e.clientX-offset.left;   

18. var y = e.clientY-offset.top;   

19.                  $(document).bind("mousemove",function(event){   

20. var _x = event.clientX-x;   

21. var _y = event.clientY-y;   

22.                       $(tag).animate({left:_x,top:_y},0);   

23.                  });   

24.             });   

25.             $(document).mouseup(function()      

26.             {      

27.                 $(tag).css("cursor","default");      

28.                 $(this).unbind("mousemove");      

29.             });      

30.         }   

31.     };   

32. })(jQuery);  

(function($){ 
	
	
	$.fn.bestDrag = function(options)
	{
		
		
		var defaults = {
			
		}
		
		var opts = $.extend(defaults, options);
		
		this.each(function()
		{
			var tag = $(this);
			drog(tag);
		});
		//到处乱拖
		function drog(tag){
			$(tag).mousedown(function(e){
				
				 $(this).css("cursor","move");
				 
				 var offset = $(this).offset();
				 
				 var x = e.clientX-offset.left;
				 var y = e.clientY-offset.top;
				
				 
				 $(document).bind("mousemove",function(event){
					  var _x = event.clientX-x;
					  var _y = event.clientY-y;
					  $(tag).animate({left:_x,top:_y},0);
				 });
				 
			});
			
			$(document).mouseup(function()   
        	{   
	            $(tag).css("cursor","default");   
	            $(this).unbind("mousemove");   
        	});   

			
		}
	};
	
	
})(jQuery);

页面引入jquery和自定义的jquery.bestDrag.js 

Html代码 

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

2. <html>

3. <head>

4. <title>test.html</title>

5. <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

6. <metahttp-equiv="description"content="this is my page">

7. <metahttp-equiv="content-type"content="text/html; charset=UTF-8">

8. <scripttype="text/javascript"src="js/jquery.min.js"></script>

9. <scripttype="text/javascript"src="js/jquery.bestDrag.js"></script>

10. <styletype="text/css">

11.     div{      

12.          background:#660099;      

13.          width:100px;      

14.          height:100px;      

15.          text-align:center;      

16.          position:absolute;      

17.          z-index:1;      

18.          left:100px;      

19.          top:100px;      

20.         }   

21. </style>

22. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

23. <scripttype="text/javascript">

24.         $(document).ready(function(){   

25.             $('div').bestDrag();   

26. </script>

27. </head>

28. <body>

29. <div>可拖动的div</div>

30. </body>

31. </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.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">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.bestDrag.js"></script>
    <style type="text/css">   
    div{   
	     background:#660099;   
	     width:100px;   
	     height:100px;   
	     text-align:center;   
	     position:absolute;   
	     z-index:1;   
	     left:100px;   
	     top:100px;   
    	}
    </style>  

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		$(document).ready(function(){
			$('div').bestDrag();
	</script>
  </head>
  
  <body>
  	    <div>可拖动的div</div>
		
	</body>
</html>

显示结果：很平滑、无延迟 






点击下载

• 

• 大小: 6.1 KB

• 

• 大小: 10.8 KB

• 

• 大小: 11.1 KB

• 

• 大小: 11.2 KB

• 

• 大小: 2.3 KB

• 

• 大小: 2.5 KB

• best.rar (22.4 KB)

• http://xiaomaha.iteye.com/blog/1106606