オンライン デモ: http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTr/jqueryAutoAddDeleteTr_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>varbindListening = 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; ("#tmpEditor").val()); <br>$(".editting").removeClass('editing'); <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 フィールド = $("tr"); <br>var addIndex = -1; <br>for(var i=1;i<fields.length>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 'アップ': <br>addIndex = i-1; <br>休憩; <br>ケース 'down': <br>ケース '編集': <br>ケース '削除': <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>varindex=getIndex(clickedTd,type); <br>} <br>$("テーブル tr").eq(index).after(addTrData); <br>setTimeout('$(".newAdd").attr("class",null)',1000); <br>$("#clickTips").hide(); <br> false を返します。 <br>} <br>var doDeleteTrData = function(clickedTd,type){ <br>if(getIndex(clickedTd,type) == -1) return false; <br>else { <br>varindex=getIndex(clickedTd,type); <br>} <br>$("テーブル tr").eq(index).remove(); <br>$("#clickTips").hide(); <br> false を返します。 <br>} <br>var doEditTrData = function(clickedTd,type){ <br>if(getIndex(clickedTd,type) == -1) return false; <br>else { <br>varindex=getIndex(clickedTd,type); <br>} <br>$("テーブル tr").eq(index).addClass('編集'); <br>$("#clickTips").hide(); <br> false を返します。 <br>} <br>} <br>bindListening(); <br>}); <br> <br>テーブル{ <br>幅:580px; <br>マージン:0 自動; <br>} <br>td,#tmpEditor{ <br>display:block; <br>浮動小数点:左; <br>ボーダー:1px ソリッド #000000; <br>マージン:自動0.5ピクセル; <br>幅:60ピクセル; <br>高さ:20px; <br>} <br>#clickTips{ <br>border:1px Solid #000000; <br>位置:絶対; <br>左:3px; <br>幅:120ピクセル; <br>パディング:3px; <br>表示:なし; <br>背景色:#F5FFFA; <br>z-インデックス:3; <br>} <br>スパン{ <br>float:left; <br>幅:100ピクセル; <br>高さ:20px; <br>クリア:両方; <br>} <br>.cloneTr{ <br>display:none; <br>} <br>.newAdd td{ <br>背景色:#FFFACD; <br>} <br>.editting td{ <br>背景色:#F0F0F0; <br>}<br> 1 2 3 4 5 6 進歩增加一行 修正当前の行 方向下增加一行 删除当前行
