基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

在线演示： http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html
//左键
复制代码代码如下:

jQuery 动态增删表格

table{
width:580px;
margin:0 auto;
}
td,#tmpEditor{
display:block;
float:left;
border:1px solid #000000;
margin:auto 0.5px;
width:60px;
height:20px;
}
#clickTips{
border:1px solid #000000;
position:absolute;
left:3px;
width:120px;
padding:3px;
display:none;
background-color:#F5FFFA;
z-index:3;
}
span{
float:left;
width:100px;
height:20px;
clear:both;
}
.cloneTr{
display:none;
}
.newAdd td{
background-color:#FFFACD;
}
.editting td{
background-color:#F0F0F0;
}


							1
							2
							3
							4
							5
							6

向上增加一行
修改当前一行
向下增加一行
删除当前行

jqueryAutoAddDeleteTableTr_rightClick.html
//右键（含屏蔽浏览器右键功能）
复制代码代码如下:

jQuery 动态增删表格

table{
width:580px;
margin:0 auto;
}
td,#tmpEditor{
display:block;
float:left;
border:1px solid #000000;
margin:auto 0.5px;
width:60px;
height:20px;
}
#clickTips{
border:1px solid #000000;
position:absolute;
left:3px;
width:120px;
padding:3px;
display:none;
background-color:#F5FFFA;
z-index:3;
}
span{
float:left;
width:100px;
height:20px;
clear:both;
}
.cloneTr{
display:none;
}
.newAdd td{
background-color:#FFFACD;
}
.editting td{
background-color:#F0F0F0;
}


							1
							2
							3
							4
							5
							6

向上增加一行
修改当前一行
向下增加一行
删除当前行

jqueryAutoAddDeleteTableTr_leftClick_addsearch.html
//左键添加查询功能
复制代码代码如下:

jQuery 动态增删表格

table{
margin:0 auto;
}
td,#tmpEditor{
display:block;
float:left;
border:1px solid #000000;
margin:auto 0.5px;
width:60px;
height:20px;
}
#clickTips{
border:1px solid #000000;
position:absolute;
left:3px;
width:120px;
padding:3px;
display:none;
background-color:#F5FFFA;
z-index:3;
}
span{
float:left;
width:100px;
height:20px;
clear:both;
}
.cloneTr{
display:none;
}
.newAdd td{
background-color:#FFFACD;
}
.editting td{
background-color:#F0F0F0;
}
.search{
background-color:#dddccc;
}
.search input{
padding-bottom: 0;
padding-right: 7px;
}
.searchButtonTd{
float:left;
}
#searchButton,#clearSearchButton{
margin-left: -2px;
margin-top: -2px;
padding-bottom: 0;
padding-right: 20px;
}



1	2	3	4	5	6	7	8
a	b	c	d	e	f	g	h
A	B	C	D	E	F	G	H
aa	bb	cc	dd	ee	ff	gg	hh
111	222	333	444	555	666	777	888
1a	2b	3c	4d	5e	6f	7g	8h

向上增加一行
修改当前一行
向下增加一行
删除当前行

PS:
var addToTrTop = 10;
var addToTrLeft = 534;

var addToTdLeft = 60; //若设置addToTdLeft则addToTrLeft失效

表示提示DIV clickTips距离当前tr顶部和左部的偏移量，可自行修改，可为负数表示上移或左移。

软件下载：下载
作者：Zjmainstay　　　　
出处：http://www.cnblogs.com/Zjmainstay/



1	2	3	4	5	6	7	8
a	b	c	d	e	f	g	h
A	B	C	D	E	F	G	H
aa	bb	cc	dd	ee	ff	gg	hh
111	222	333	444	555	666	777	888
1a	2b	3c	4d	5e	6f	7g	8h



1	2	3	4	5	6	7	8
a	b	c	d	e	f	g	h
A	B	C	D	E	F	G	H
aa	bb	cc	dd	ee	ff	gg	hh
111	222	333	444	555	666	777	888
1a	2b	3c	4d	5e	6f	7g	8h

基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

JavaScript相关栏目本月热门文章



1	2	3	4	5	6	7	8
a	b	c	d	e	f	g	h
A	B	C	D	E	F	G	H
aa	bb	cc	dd	ee	ff	gg	hh
111	222	333	444	555	666	777	888
1a	2b	3c	4d	5e	6f	7g	8h