온라인 데모: http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html//왼쪽 클릭 코드를 복사하세요 코드는 다음과 같습니다. <머리> jQuery 动态增删表格 <본문> <br>$(document).ready(function(){ <br>var addToTrTop = 10; <br>var addToTrLeft = 534; <br>var preEdit = null; <br>var inputData = '<input id= "tmpEditor" type="text" value="?"></input>'; <br>var findListening = function(){ <br>//表格点击响应 <br>$("td"). unbind().click(function(){ <br>var tdData = $("#tmpEditor").val(); <br>if( !$(this).parent().hasClass('editting')) { <br>preEdit&&preEdit.empty().html(tdData.trim(' ')) <br>preEdit = null <br>$("#tmpEditor").parent().empty().html($ ("#tmpEditor").val()) <br>$(".editting").removeClass('editting') <br>}else if( preEdit && (preEdit.parent().children(). index($(preEdit)) != $(this).parent().children().index($(this))) ){ <br>preEdit.empty().html(tdData.trim(' ') ); <br>preEdit = null; <br>}else{ <br>if(!$("#tmpEditor").val()) { <br>preEdit = $(this); $(this).html(); <br>$(this).empty().append(inputData.replace('?',tdData)) <br>$("#tmpEditor").focus(); <br>} <br>} <br>if(!$(this).parent().hasClass('editting')){ <br>vartipStyle = 'top:' (parseInt($(this).offset ().top) addToTrTop) 'px;left:' (parseInt($(this).parent().offset().left) addToTrLeft) 'px;'; <br>$("#clickTips").attr('style',tipStyle).show(); <br>} <br>bindListening(); <br>}); <br>//向上增加一行 <br>$("#addUp").unbind().click(function(){ <br>doAddTrData($(this),'up'); <br>bindListening() ; <br>}); <br>//向下增加一行 <br>$("#addDown").unbind().click(function(){ <br>doAddTrData($(this),'down'); <br>bindListening( ) <br>}); <br>//删除当前行 <br>$("#delete").unbind().click(function(){ <br>doDeleteTrData($(this),'delete'); <br>bindListening() ; <br>}); <br>//编辑当前行 <br>$("#edit").unbind().click(function(){ <br>doEditTrData($(this),'edit'); <br>bindListening() ; <br>}); <br>var addTrData = $("tr:first").clone(true).attr('class','newAdd'); <br>var getIndex = function(clickedTd,type){ <br>var fields = $("tr"); <br>var addIndex = -1; <br>for(var i=1;i<fields.length;i ){ <br>vartipStyle = clickedTd.parent().attr('style'); <br>var topValue = 'top: ' (parseInt(fields.eq(i).offset().top) addToTrTop); <br>var ie_topValue = 'top: ' (parseInt(fields.eq(i).offset().top) (addToTrTop-2)); <br>if((tipStyle.indexOf(topValue) != -1) || (tipStyle.indexOf(ie_topValue) != -1)) { <br>switch(type.toLowerCase()){ <br>case ' up': <br>addIndex = i-1; <br>휴식; <br>case 'down': <br>case 'edit': <br>case 'delete': <br>addIndex = i; <br>휴식; <br>} <br>} <br>} <br>return addIndex; <br>} <br>var doAddTrData = function(clickedTd,type){ <br>if(getIndex(clickedTd,type) == -1) return false; <br>else { <br>var index=getIndex(clickedTd,type); <br>} <br>$("table tr").eq(index).after(addTrData); <br>setTimeout('$(".newAdd").attr("class",null)',1000); <br>$("#clickTips").hide(); <br>거짓을 반환합니다. <br>} <br>var doDeleteTrData = function(clickedTd,type){ <br>if(getIndex(clickedTd,type) == -1) return false; <br>else { <br>var index=getIndex(clickedTd,type); <br>} <br>$("table tr").eq(index).remove(); <br>$("#clickTips").hide(); <br>거짓을 반환합니다. <br>} <br>var doEditTrData = function(clickedTd,type){ <br>if(getIndex(clickedTd,type) == -1) return false; <br>else { <br>var index=getIndex(clickedTd,type); <br>} <br>$("table tr").eq(index).addClass('editting'); <br>$("#clickTips").hide(); <br>거짓을 반환합니다. <br>} <br>} <br>bindListening(); <br>}); <br> <br>테이블{ <br>너비:580px; <br>여백:0 자동; <br>} <br>td,#tmpEditor{ <br>display:block; <br>플로트:왼쪽; <br>테두리:1px 솔리드 #000000; <br>여백:자동 0.5px; <br>너비:60px; <br>높이:20px; <br>} <br>#clickTips{ <br>테두리:1px 솔리드 #000000; <br>위치:절대; <br>왼쪽:3px; <br>폭:120px; <br>패딩:3px; <br>디스플레이:없음; <br>배경색:#F5FFFA; <br>z-색인:3; <br>} <br>범위{ <br>float:left; <br>폭:100px; <br>높이:20px; <br>지우기:둘 다; <br>} <br>.cloneTr{ <br>디스플레이:없음; <br>} <br>.newAdd td{ <br> background-color:#FFFACD; <br>} <br>.editting td{ <br> background-color:#F0F0F0; <br>}<br> <테이블> 1 2 3 4 5 6 向上增加一行 修改当前一行 向下增加一行 删除当前行
