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

在线演示： http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html

//左键

复制代码代码如下:

<html>

<head>

<title>jQuery 动态增删表格</title>

</head>

<body>

$(document).ready(function(){

var addToTrTop = 10;

var addToTrLeft = 534;

var preEdit = null;

var inputData = '<input id="tmpEditor" type="text" value="?"></input>';

var bindListening = function(){

//表格点击响应

$("td").unbind().click(function(){

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')){

var tipStyle = 'top:'+(parseInt($(this).offset().top)+addToTrTop)+'px;left:'+(parseInt($(this).parent().offset().left)+addToTrLeft)+'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();

});

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>

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>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<span id="addUp">向上增加一行</span>

<span id="edit">修改当前一行</span>

<span id="addDown">向下增加一行</span>

<span id="delete">删除当前行</span>

</div>

</body>

</html>

jqueryAutoAddDeleteTableTr_rightClick.html

//右键（含屏蔽浏览器右键功能）

复制代码代码如下:

<html>

<head>

<title>jQuery 动态增删表格</title>

</head>

<body>

$(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>

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>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<span id="addUp">向上增加一行</span>

<span id="edit">修改当前一行</span>

<span id="addDown">向下增加一行</span>

<span id="delete">删除当前行</span>

</div>

</body>

</html>

jqueryAutoAddDeleteTableTr_leftClick_addsearch.html

//左键添加查询功能

复制代码代码如下:

<html>

<head>

<title>jQuery 动态增删表格</title>

</head>

<body>

$(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>

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>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<span id="addUp">向上增加一行</span>

<span id="edit">修改当前一行</span>

<span id="addDown">向下增加一行</span>

<span id="delete">删除当前行</span>

</div>

</body>

</html>

PS:

var addToTrTop = 10;

var addToTrLeft = 534;

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

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

软件下载：下载

作者：Zjmainstay

出处：http://www.cnblogs.com/Zjmainstay/