jquery实现的表格添加或者删除行操作:
对于表格的使用应该是非常的熟悉了，下面是一段非常强大的代码，能够实现表格行的添加删除甚至可以对单元格进行编辑，下面就分享一下次代码，希望能够对大家有所帮助，代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>jQuery动态增删表格-蚂蚁部落</title><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><script type="text/javascript" src='/images/loading.gif' data-original="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script><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></head><body><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>
以上代码实现了我们想要的功能，点击单元格的行，可以进行相应的操作。
特别说明:代码来源于网络，如有侵权请尽快联系本站。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8523
更多内容可以参阅:http://www.softwhy.com/jquery/
原标题：jquery实现的表格添加或者删除行操作
关键词：jquery
我知道了 