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

程序员文章站 2022-03-12 09:37:31

//左键代码如下: jquery 动态增删表格

//左键

代码如下:

//右键（含屏蔽右键功能）

. 代码如下:

<html>
<head>
<title>jquery 动态增删表格</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-cn" />
<script type="text/javascript" src="https://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var addtotrtop = 10;
var addtotrleft = 60;
var preedit = null;
var inputdata = '<input id="tmpeditor" type="text" value="?"></input>';
var bindlistening = function(){
//屏蔽浏览器右键
if (window.event) document.captureevents(event.mouseup);
function nocontextmenu(e){
if(!e) var e=window.event;
e.cancelbubble = true
e.returnvalue = false;
return false;
}
function norightclick(e){
if(!e) var e=window.event;
if (window.event){
if (e.which == 2 || e.which == 3)
return false;
}else if (e.keycode == 2 || e.keycode == 3){
e.cancelbubble = true
e.returnvalue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for ie5+
document.onmousedown = norightclick; // for all others
//end 屏蔽浏览器右键
//表格右键响应
$("td").mousedown(function(e){
var code;
if(!e) var e=window.event;
if(e.keycode) {
code=e.keycode;
}else if(e.which){
code = e.which;
}
var tddata = $("#tmpeditor").val();
if(code == 3){
var tipstyle = 'top:'+(parseint($(this).offset().top)+addtotrtop)+'px;left:'+(parseint($(this).offset().left)+addtotrleft)+'px;';
$("#clicktips").attr('style',tipstyle).show();
return false;
}
if(code == 1){
if( !$(this).parent().hasclass('editting')) {
preedit&&preedit.empty().html(tddata.trim(' '));
preedit = null;
$("#tmpeditor").parent().empty().html($("#tmpeditor").val());
$(".editting").removeclass('editting');
}else if( preedit && (preedit.parent().children().index($(preedit)) != $(this).parent().children().index($(this))) ){
preedit.empty().html(tddata.trim(' '));
preedit = null;
}else{
if(!$("#tmpeditor").val()) {
preedit = $(this);
var tddata = $(this).html();
$(this).empty().append(inputdata.replace('?',tddata));
$("#tmpeditor").focus();
}
}
return false;
}
bindlistening();
}); //end 表格右键响应
//向上增加一行
$("#addup").unbind().click(function(){
doaddtrdata($(this),'up');
bindlistening();
});
//向下增加一行
$("#adddown").unbind().click(function(){
doaddtrdata($(this),'down');
bindlistening();
});
//删除当前行
$("#delete").unbind().click(function(){
dodeletetrdata($(this),'delete');
bindlistening();
});
//编辑当前行
$("#edit").unbind().click(function(){
doedittrdata($(this),'edit');
bindlistening();
});
var addtrdata = $("tr:first").clone(true).attr('class','newadd');
var getindex = function(clickedtd,type){
var fields = $("tr");
var addindex = -1;
for(var i=1;i<fields.length;i++){
var tipstyle = clickedtd.parent().attr('style');
var topvalue = 'top: '+(parseint(fields.eq(i).offset().top)+addtotrtop);
var ie_topvalue = 'top: '+(parseint(fields.eq(i).offset().top)+(addtotrtop-2));
if((tipstyle.indexof(topvalue) != -1) || (tipstyle.indexof(ie_topvalue) != -1)) {
switch(type.tolowercase()){
case 'up':
addindex = i-1;
break;
case 'down':
case 'edit':
case 'delete':
addindex = i;
break;
}
}
}
return addindex;
}
var doaddtrdata = function(clickedtd,type){
if(getindex(clickedtd,type) == -1) return false;
else {
var index=getindex(clickedtd,type);
}
$("table tr").eq(index).after(addtrdata);
settimeout('$(".newadd").attr("class",null)',1000);
$("#clicktips").hide();
return false;
}
var dodeletetrdata = function(clickedtd,type){
if(getindex(clickedtd,type) == -1) return false;
else {
var index=getindex(clickedtd,type);
}
$("table tr").eq(index).remove();
$("#clicktips").hide();
return false;
}
var doedittrdata = function(clickedtd,type){
if(getindex(clickedtd,type) == -1) return false;
else {
var index=getindex(clickedtd,type);
}
$("table tr").eq(index).addclass('editting');
$("#clicktips").hide();
return false;
}
}
bindlistening();
});
</script>
<style type="text/css">
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;
}
</style>
<p id="tablecontainer">
<table>
<tr class="clonetr">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>6</td>
</tr>
</table>
</p>
<p id="clicktips">
<span id="addup">向上增加一行</span>
<span id="edit">修改当前一行</span>
<span id="adddown">向下增加一行</span>
<span id="delete">删除当前行</span>
</p>
</body>
</html>

//左键添加查询功能

. 代码如下:

<html>
<head>
<title>jquery 动态增删表格</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-cn" />
<script type="text/javascript" src="https://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var addtotrtop = 10;
var addtotrleft = 534;
var addtotdleft = 60; //若设置addtotdleft则addtotrleft失效
var preedit = null;
var inputdata = '<input id="tmpeditor" type="text" value="?"></input>';
var bindlistening = function(){
//表格点击响应
$("td").unbind().click(function(){
if($(this).hasclass('search')) return false;
var tddata = $("#tmpeditor").val();
if( !$(this).parent().hasclass('editting')) {
preedit&&preedit.empty().html(tddata.trim(' '));
preedit = null;
$("#tmpeditor").parent().empty().html($("#tmpeditor").val());
$(".editting").removeclass('editting');
}else if( preedit && (preedit.parent().children().index($(preedit)) != $(this).parent().children().index($(this))) ){
preedit.empty().html(tddata.trim(' '));
preedit = null;
}else{
if(!$("#tmpeditor").val()) {
preedit = $(this);
var tddata = $(this).html();
$(this).empty().append(inputdata.replace('?',tddata));
$("#tmpeditor").focus();
}
}
if(!$(this).parent().hasclass('editting')){
if(!addtotdleft){
var offsetleft = (parseint($(this).parent().offset().left)+addtotrleft);
}else {
var offsetleft = (parseint($(this).offset().left)+addtotdleft);
}
var tipstyle = 'top:'+(parseint($(this).offset().top)+addtotrtop)+'px;left:'+offsetleft+'px;';
$("#clicktips").attr('style',tipstyle).show();
}
bindlistening();
});
//向上增加一行
$("#addup").unbind().click(function(){
doaddtrdata($(this),'up');
bindlistening();
});
//向下增加一行
$("#adddown").unbind().click(function(){
doaddtrdata($(this),'down');
bindlistening();
});
//删除当前行
$("#delete").unbind().click(function(){
dodeletetrdata($(this),'delete');
bindlistening();
});
//编辑当前行
$("#edit").unbind().click(function(){
doedittrdata($(this),'edit');
bindlistening();
});
//查询操作
$("#searchbutton").click(function(){
$("#clicktips").hide();
var trs = $("#tablecontainer").find("tr");
var tdlength = trs.eq(0).children('td').length;
var regexp = '';
for(var i=0;i<tdlength;i++){
regexp += '[^,]*'+trs.eq(1).find('input').eq(i).val()+'[^,]*,';
}
//不加eval则正则匹配失效
regexp = eval('/' + regexp.substr(0,regexp.length-1) + '/i');
var stringobject = [];
for(var i=2;i<trs.length;i++){
stringobject[i] = '';
for(var j=0;j<tdlength;j++){
stringobject[i] += trs.eq(i).find('td').eq(j).html()+',';
}
stringobject[i] = stringobject[i].substr(0,stringobject[i].length-1).tostring();
}
for(var i=2;i<trs.length;i++){
if(stringobject[i].search(regexp)) {
trs.eq(i).hide();
}else{
trs.eq(i).show();
}
}
bindlistening();
});
var addtrdata = $("tr:first").clone(true).attr('class','newadd');
var getindex = function(clickedtd,type){
var fields = $("tr");
var addindex = -1;
for(var i=1;i<fields.length;i++){
var tipstyle = clickedtd.parent().attr('style');
var topvalue = 'top: '+(parseint(fields.eq(i).offset().top)+addtotrtop);
var ie_topvalue = 'top: '+(parseint(fields.eq(i).offset().top)+(addtotrtop-2));
if((tipstyle.indexof(topvalue) != -1) || (tipstyle.indexof(ie_topvalue) != -1)) {
switch(type.tolowercase()){
case 'up':
addindex = i-1;
break;
case 'down':
case 'edit':
case 'delete':
addindex = i;
break;
}
}
}
return addindex;
}
$("#clearsearchbutton").click(function(){
$("#clicktips").hide();
$(".search input[type=text]").val('');
$("tr").show();
$("tr.clonetr").hide();
})
var doaddtrdata = function(clickedtd,type){
if(getindex(clickedtd,type) == -1) return false;
else {
var index=getindex(clickedtd,type);
}
$("table tr").eq(index).after(addtrdata);
settimeout('$(".newadd").attr("class",null)',1000);
$("#clicktips").hide();
return false;
}
var dodeletetrdata = function(clickedtd,type){
if(getindex(clickedtd,type) == -1) return false;
else {
var index=getindex(clickedtd,type);
}
$("table tr").eq(index).remove();
$("#clicktips").hide();
return false;
}
var doedittrdata = function(clickedtd,type){
if(getindex(clickedtd,type) == -1) return false;
else {
var index=getindex(clickedtd,type);
}
$("table tr").eq(index).addclass('editting');
$("#clicktips").hide();
return false;
}
}
bindlistening();
});
</script>
<style type="text/css">
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;
}
</style>
<p id="tablecontainer">
<table>
<tr class="clonetr">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search searchbuttontd"><input id="searchbutton" type="button" size="10" value="查询"/></td>
<td class="search searchbuttontd"><input id="clearsearchbutton" type="button" size="10" value="清除"/></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>hh</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>666</td>
<td>777</td>
<td>888</td>
</tr>
<tr>
<td>1a</td>
<td>2b</td>
<td>3c</td>
<td>4d</td>
<td>5e</td>
<td>6f</td>
<td>7g</td>
<td>8h</td>
</tr>
</table>
</p>
<p id="clicktips">
<span id="addup">向上增加一行</span>
<span id="edit">修改当前一行</span>
<span id="adddown">向下增加一行</span>
<span id="delete">删除当前行</span>
</p>
</body>
</html>

ps:
var addtotrtop = 10;
var addtotrleft = 534;

var addtotdleft = 60; //若设置addtotdleft则addtotrleft失效

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

上一篇： jQuery错误：意外地调用了方法或属性访问的解决办法

下一篇： jQuery Tools tooltip使用说明

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

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

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

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