管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　在线演示： http://demo.glzy8.com/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>

　　</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>

　　</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>

　　</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/

教程首页更多教程