你的位置:首页 > Java教程

[Java教程]jquery实现的表格添加或者删除行操作


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="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/