Posted in Javascript onJuly 31, 2012
在线演示: http://demo.3water.com/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.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="http://demo.3water.com/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 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> <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> <div 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> </div> <div id="clickTips"> <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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <script type="text/javascript" src="http://demo.3water.com/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> <div 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> </div> <div id="clickTips"> <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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <script type="text/javascript" src="http://demo.3water.com/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> <div 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> </div> <div id="clickTips"> <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/
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@