點選刪除表格行程式碼例項

admin發表於2017-04-15
行程

本章節分享一段程式碼例項，它實現了點選按鈕刪除表格行程式碼功能。

此效果還具有檢視資料功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
table td {
  border: 1px solid #CCCCCC;
  padding: 5px;
  text-align:center;
}
table td span {
  margin: 0 5px;
  cursor:pointer;
}
.pop {
  display: none;
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  background-color: #fff;
  z-index: 3;
  border: 5px solid #e5e5e5;
  padding: 10px;
}
.pop a {
  float:right;
  text-decoration:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $(".view").click(function(){
    $("<div class='mask'></div>").appendTo($("body"));
    $(".mask").css({
      "background":"#000",
      "opacity":"0.4",
      "position":"absolute",
      "top":"0",
      "left":"0",
      "width":"100%",
      "height":"100%",
      "z-index":"2"
    });
    var arr=[];
    $(this).parent().siblings().each(function(){
      arr.push($(this).text());
    });
    $(".pop").show().children().each(function(index){
      $(this).children("span").text(arr[index-1]);
    });
  })
  $(".close").click(function(){
    $(this).parent().hide();
    $(".mask").remove();
  })
  $(".del").click(function(){
    $(this).parents("tr").remove();
  })
})
</script>
</head>
<body>
<table>
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>職稱</td>
    <td>工資</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
    <td>前端程式設計</td>
    <td>6000</td>
    <td><span class="view">檢視</span><span class="del">刪除</span></td>
  </tr>
  <tr>
    <td>李四</td>
    <td>23</td>
    <td>c#程式設計師</td>
    <td>5000</td>
    <td><span class="view">檢視</span><span class="del">刪除</span></td>
  </tr>
</table>
<div class="pop">
  <a href="#" class="close">關閉</a>
  <p>姓名：<span></span></p>
  <p>年齡：<span></span></p>
  <p>職稱：<span></span></p>
  <p>工資：<span></span></p>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$(".view").click(function(){})，為檢視按鈕註冊click事件處理函式。

（3）.$("<div class='mask'></div>").appendTo($("body"))，為body新增一個div元素，也就是半透明的遮罩層。

（4）.$(".mask").css({  "background":"#000",

  "opacity":"0.4",

  "position":"absolute",

  "top":"0",

  "left":"0",

  "width":"100%",

  "height":"100%",

  "z-index":"2"

}),設定遮罩層的相關樣式。

（5）.var arr=[]，宣告一個陣列，下面會用到。

（6）.$(this).parent().siblings().each(function(){

  arr.push($(this).text());

})，$(this).parent()獲取的是檢視按鈕的父元素，也就是所在的td單元格。

那麼$(this).parent().siblings()就是獲取的同一行的資料單元格。

通過each遍歷每一個單元格，然後將裡面的文字存入陣列。

（7）.$(".pop").show().children().each(function(index){  

  $(this).children("span").text(arr[index-1]);

})，將陣列中的文字內容寫入對應的span元素中。

（8）.$(".close").click(function(){

  $(this).parent().hide();

  $(".mask").remove();

})，點選關閉按鈕，可以隱藏資料層，並且刪除遮罩層。

（9）.$(".del").click(function(){

  $(this).parents("tr").remove();

})，點選刪除當前行。

二.相關閱讀:

（1）.appendTo()可以參閱jQuery appendTo()一章節。

（2）.css()可以參閱jQuery css()一章節。

（3）.parent()可以參閱jQuery parent()一章節。

（4）.siblings()可以參閱jQuery siblings()一章節。

（5）.each()可以參閱jQuery each()一章節。

]（6）.children()可以參閱jQuery children()一章節。

（7）.remove()可以參閱jQuery remove()一章節。

相關文章