jquery仿google Docs在线文档的表格插入效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html>	
<head> 
<meta charset="utf-8">
<title>仿google Docs在线文档的表格插入效果</title> 
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
/*reset*/
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,img,ins,del,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0}
body,button,input,select,textarea{font:12px/1.6 Arial,Tahoma,simsun;color:#333}
button,input,select,textarea{margin:0;outline:0}
textarea{resize:none}
h1,h2,h3,h4,h5,h6{font-size:100%}
address,cite,dfn,em,var,i{font-style:normal}
blockquote:before,blockquote:after,q:before,q:after{content:''}
table{border-spacing:0;border-collapse:collapse}
li{list-style:none}
section,article,aside,header,footer,nav,dialog,figure{display:block}/*html5*/
pre{word-wrap:break-word;font-family:Arial;zoom:1;white-space:pre-wrap}
/*public*/
a{text-decoration:none;color:#36c}
a:hover{text-decoration:underline;color:#FF7000}
.clear{clear:both;height:0;overflow:hidden}
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden}
.clearfix{zoom:1}
label input{vertical-align:-2px;*vertical-align:0}
.fl{float:left}
.fr{float:right}
.page_all{width:980px;margin:0 auto}
.gray3{color:#333}/*text*/
.gray6{color:#666}
.gray7{color:#7e7e7e}
.gray9{color:#999}
.orange,.sublink .orange{color:#ff7000}
.green{color:#65C202}
.sublink a{color:#3C5891}
.m5{margin:5px}/*margin*/
.mt5{margin-top:5px}
.mr5{margin-right:5px}
.mb5{margin-bottom:5px}
.ml5{margin-left:5px}
.m10{margin:10px}
.mt10{margin-top:10px}
.mr10{margin-right:10px}
.mb10{margin-bottom:10px}
.ml10{margin-left:10px}
.lh24{line-height:24px}
</style>
</head> 
<body>
<style type="text/css"> 
#insert_table{border-radius:2px;box-shadow:0px 1px 3px rgba(0,0,0,0.1);background:-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);border:1px solid #aaa;color:#444;padding:3px 12px 3px 12px;margin:60px 100px}
#insert_table:hover{box-shadow:0px 1px 3px rgba(0,0,0,0.2);background:#ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);border-color:#999;color: #222}
.in_tab_box{border:1px solid #ccc;box-shadow:1px 1px 5px #ddd;background:#fff;padding:5px;display:none;position:absolute}
.itb_con{width:100%;height:100%;overflow:hidden;font-size:18px;position:relative;-webkit-transition:all .1s linear;-moz-transition:all .1s linear}
.itb_picker_unlight{background:url(https://ssl.gstatic.com/docs/documents/images/dimension-unhighlighted.png) repeat}
.itb_picker_unlight,.itb_picker_light{position:absolute;top:0;left:0;-webkit-transition:all .1s linear;-moz-transition:all .1s linear}
.itb_picker_light{background:url(https://ssl.gstatic.com/docs/documents/images/dimension-highlighted.png) repeat}
.itb_picker_status{text-align:center;color:#333;font:10pt/1.7 arial}
/*other style*/
h1{font:26px/3 'microsoft yahei','simhei';color:#000;text-indent:2em;text-shadow:1px 1px 2px #ccc}
h3{margin-bottom:10px}	
table{margin:0 100px;border:solid #ccc;border-width:1px 0 0 1px}
td{border:solid #ccc;border-width:0 1px 1px 0;padding:10px;-webkit-transition:all .15s linear;-moz-transition:all .15s linear}
td:hover{background:#eee}
</style>
<h1>仿google Docs在线文档的表格插入效果</h1>
<button id="insert_table">插入表格</button>
 
 
<script> 
/*
 * 插入表格
 * @btn:选择触发器,jquery对象
 * @opt:表格选项,{min:[最小列数,最小行数],max:[最大列数,最大行数],insert:确认选择后回调事件}
 */	
var insertTable = function(btn,opt){
	if(!btn){return;}
	this.btn = btn;
	opt = opt || {};
	this.box = null;//弹框
	this.inBox = null;
	this.pickUnLight = null;
	this.pickLight = null;
	this.status = null;
	this.minSize = opt.min || [5,5];//最小列数和行数
	this.maxSize = opt.max || [15,15];//最大列数和行数
	this.insert = opt.insert;//回调
	this.nowSize = [];//当前选择尺寸
	this.isInit = {create:false,bind:false};
	this.bind();
}
insertTable.prototype = {
	init : function(){
		if(this.isInit.create){return;}
		this.isInit.create = true;
		var id = 'in_tab_box_'+String(Math.ceil(Math.random() * 100000) + String(new Date().getTime())),
			html = '<div class="in_tab_box" id="'+id+'">';
		html += 	'<div class="itb_con">';
		html += 		'<div class="itb_picker_unlight"></div>';
		html += 		'<div class="itb_picker_light"></div>';
		html += 	'</div>';
		html += 	'<div class="itb_picker_status"></div>';
		html += '</div>';
		$("body").append(html);
		this.box = $("#"+id);
		this.inBox = this.box.find(".itb_con");
		this.pickAll = this.box.find(".itb_picker_all");
		this.pickUnLight = this.box.find(".itb_picker_unlight");
		this.pickLight = this.box.find(".itb_picker_light");
		this.status = this.box.find(".itb_picker_status");
		this.setBg(this.minSize[0],0);
		this.setBg(this.minSize[1],1);
		this.status.text(0+'列 x '+0+'行');
	},	
	bind : function(){
		var T = this,
			pos,//弹框显示位置
			m,
			bPos,//弹框可选区域位置
			mPos;//鼠标位置
		this.btn.click(function(){
			if(!T.isInit.create){T.init();}//初始化弹框
			if(!T.isInit.bind){B();}//初始化事件
			m = $(this);
			if(T.box.is(":hidden")){
				pos = {
					top:m.offset().top,
					left:m.offset().left+m.outerWidth()+2
				}
				T.box.css({
					"top":pos.top,
					"left":pos.left
				}).fadeIn(100);
				bPos = {
					top : T.inBox.offset().top,
					left : T.inBox.offset().left
				}
				$(document).bind("click",function(){T.hide();});
			}else{
				T.hide();
			}
			return false;
		})
		function B(){
			T.isInit.bind = true;
			T.inBox.mousemove(function(e){
				mPos = {
					x : e.clientX,
					y : e.clientY
				}
				if(mPos.x < bPos.left || mPos.y < bPos.top){return;}
				T.nowSize[0] = Math.ceil((mPos.x - bPos.left)/18);//列数
				T.nowSize[1] = Math.ceil((mPos.y - bPos.top)/18);//行数
				
				if(T.nowSize[0]>=T.minSize[0]&&T.nowSize[0]<T.maxSize[0]){
					T.setBg(T.nowSize[0]+1,0);
				}else if(T.nowSize[0]<T.minSize[0]){
					T.setBg(T.minSize[0],0);
				}else{
					T.nowSize[0] = T.maxSize[0];
				}
				if(T.nowSize[1]>=T.minSize[1]&&T.nowSize[1]<T.maxSize[1]){
					T.setBg(T.nowSize[1]+1,1);
				}else if(T.nowSize[1]<T.minSize[1]){
					T.setBg(T.minSize[1],1);
				}else{
					T.nowSize[1] = T.maxSize[1];
				}
				
				T.pickLight.css({
					"width":T.nowSize[0]+'em',
					"height":T.nowSize[1]+'em'
				})
				T.status.text(T.nowSize[0]+'列 x '+T.nowSize[1]+'行');
			})
			//单击确认插入表格
			T.box.click(function(){
				if(T.nowSize[0]>0&&T.nowSize[0]<=T.maxSize[0]&&T.nowSize[1]>0&&T.nowSize[1]<=T.maxSize[1]){
					var rows = T.nowSize[1],
						cols = T.nowSize[0];
					try{T.insert(rows,cols);}catch(e){}	
				}
			})
		}
	},
	//调整背景区域
	setBg : function(size,t){
		if(t==0){
			this.inBox.width(size+'em');
			this.pickUnLight.width(size+'em');
		}else{
			this.inBox.height(size+'em');
			this.pickUnLight.height(size+'em');
		}
	},
	//隐藏弹框
	hide : function(){
		var T = this;		
		this.box.fadeOut(100,function(){
			//重置
			T.setBg(T.minSize[0],0);
			T.setBg(T.minSize[1],1);
			T.pickLight.css({
				"width":'0',
				"height":'0'
			})
		});
	}
}
new insertTable($("#insert_table"),{
	min : [4,4],
	max : [20,20],
	insert : function(rows,cols){
		//这里只返回所选行数rows和列数cols,插入后的效果和样式需自定义,以下只是做简单的示例
		//alert('插入了一个'+rows+'行'+cols+'列的表格');
		var html = '<table>';
		for(var i=0;i<rows;i++){
			html += '<tr>';
			for(var j=0;j<cols;j++){
				html += '<td></td>';
			}
			html += '</tr>';
		}
		html += '</table>';
		this.btn.siblings("table").remove();
		this.btn.after(html);
	}
});
</script>
</body> 
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jquery仿google Docs在线文档的表格插入效果

分类

表格图层

描述

jquery仿google Docs在线文档的表格插入效果,模仿google在线文档的一个表格插入效果，基于jQuery编写，当然只是选择表格部分，不包括表格自身的内容编辑，感兴趣的朋友可以自己编写扩展。该函数带有2个参数，一个是触发对象，一个是表格...