jQuery动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）
canrun
//左键
View Code
<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://files.cnblogs.com/Zjmainstay/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($.trim(tdData)); 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($.trim(tdData)); 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>
//右键（含屏蔽浏览器右键功能）
View Code
<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://files.cnblogs.com/Zjmainstay/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($.trim(tdData)); 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($.trim(tdData)); 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>
//左键添加查询功能
View Code
<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://files.cnblogs.com/Zjmainstay/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($.trim(tdData)); 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($.trim(tdData)); 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>
//左键添加、查询功能修复bug
修复说明：
1、将正则模式生成从eval改为new RegExp(pattern);
2、去掉查询、修改、删除中的bindListener事件绑定，特别的，查询中绑定事件会导致bindListener函数呈O(n)递增调用。
3、清除操作中$("tr.cloneTr").hide();会导致新增行无法显示，默认.cloneTr为display：none，因此不需要hide操作。
4、#tmpEditor 样式作了调整。
5、tdData.trim(' ') 改成 $.trim(tdData) //前者IE下报错
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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://files.cnblogs.com/Zjmainstay/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(){ console.log('bind'); //记录绑定调用 //表格点击响应 $("td").unbind().click(function(){ if($(this).hasClass('search')) return false; var tdData = $("#tmpEditor").val(); if( !$(this).parent().hasClass('editting')) { preEdit&&preEdit.empty().html($.trim(tdData)); 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($.trim(tdData)); 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(); } }); //向上增加一行 $("#addUp").unbind().click(function(){ doAddTrData($(this),'up'); bindListening(); }); //向下增加一行 $("#addDown").unbind().click(function(){ doAddTrData($(this),'down'); bindListening(); }); //删除当前行 $("#delete").unbind().click(function(){ doDeleteTrData($(this),'delete'); }); //编辑当前行 $("#edit").unbind().click(function(){ doEditTrData($(this),'edit'); }); //查询操作 $("#searchButton").click(function(){ $("#clickTips").hide(); var trs = $("#tableContainer").find("tr"); var tdLength = trs.eq(0).children('td').length; var pattern = ''; for(var i=0;i<tdLength;i++){ pattern += '[^,]*'+trs.eq(1).find('input').eq(i).val()+'[^,]*,'; } pattern = pattern.substr(0,pattern.length-1); //删除末尾逗号 pattern = new RegExp(pattern); //转成正则表达式 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(pattern)) { trs.eq(i).hide(); }else{ trs.eq(i).show(); } } }); $("#clearSearchButton").click(function(){ $("#clickTips").hide(); $(".search input[type=text]").val(''); $("tr:gt(0)").show(); }) 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{ margin:0 auto; } td{ display:block; float:left; border:1px solid #000000; margin:auto 0.5px; width:60px; height:20px; } #tmpEditor { display:block; float:left; border:1px solid #000000; height: 16px; margin: 0; width: 58px; } #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顶部和左部的偏移量，可自行修改，可为负数表示上移或左移。
软件下载：下载
