jquery实现的表格添加或者删除行操作

时间：2015-12-27 10:52:06 阅读：353 评论：0 收藏：0 [点我收藏+]

标签：

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/

jquery实现的表格添加或者删除行操作

标签：

原文地址：http://www.cnblogs.com/zhadanren/p/5079617.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行