jQuery动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）
<div id="cnblogs_post_body">canrun//左键
<div class="cnblogs_code" >http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code <div id="cnblogs_code_open_93329a3b-cebe-4700-ab89-f94d76c788ec" class="cnblogs_code_hide"><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://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(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>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>1</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>2</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>3</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>4</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>5</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</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>
页:
[1]