jQuery實現的表格新增或者刪除行操作

admin發表於2017-02-23
jQuery

對於表格的使用應該是非常的熟悉了，下面是一段非常強大的程式碼，能夠實現表格行的新增刪除甚至可以對單元格進行編輯，下面就分享一下次程式碼，希望能夠對大家有所幫助，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!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 src="http://libs.baidu.com/jquery/1.9.0/jquery.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>

相關文章