欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery實(shí)現(xiàn)表格的查看修改刪除

 更新時(shí)間：2016年08月01日 17:30:55   作者：macanfa  
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)表格的查看修改刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

效果圖：

HTML：

  <table id="table">
    <tr>
      <th>姓名</th>
      <th>年齡</th>
      <th>職位</th>
      <th>薪資</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>張三</td>
      <td>23</td>
      <td>前端工程師</td>
      <td>10000</td>
      <td>
        <a href="###" class="view">查看</a>
        <a href="#" class="del">刪除</a>
        <a href="#" class="modify">修改</a>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>33</td>
      <td>JAVA程序猿</td>
      <td>12000</td>
      <td>
        <a href="#" class="view">查看</a>
        <a href="#" class="del">刪除</a>
        <a href="#" class="modify">修改</a>
      </td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>美工</td>
      <td>9000</td>
      <td>
        <a href="#" class="view">查看</a>
        <a href="#" class="del">刪除</a>
        <a href="#" class="modify">修改</a>
      </td>
    </tr>
  </table>
  <div class="popDiv">
    <p><strong>姓名:</strong><span></span></p>
    <p><strong>年齡:</strong><span></span></p>
    <p><strong>職位:</strong><span></span></p>
    <p><strong>薪資:</strong><span></span></p>
    <a href="#" class="close">關(guān)閉</a>
  </div>
  <div class="modifyDiv">
    <p><strong>姓名:</strong><input type="text"></p>
    <p><strong>年齡:</strong><input type="text"></p>
    <p><strong>職位:</strong><input type="text"></p>
    <p><strong>薪資:</strong><input type="text"></p>
    <a href="#" class="yes">確定</a>
    <a href="#" class="close">取消</a>
  </div>

CSS:

#table{
    border:1px solid #ccc;
    border-collapse:collapse;
    width:600px;}
  #table tr{height:30px;}
  #table tr:nth-child(2n){background-color:#eee;}
  #table tr th, td{border:1px solid #ccc;text-align: center;

  }
  td a{
    color:red;
  }
  .popDiv{
    width:500px;
    border:1px solid purple;
    position:absolute;
    top:50%;left:50%;
    margin-left:-250px;
    margin-top:-100px;
    background:#fff;
    padding:10px;
    display:none;
    z-index:3;
    border:1px solid #ccc;
  }
  .popDiv p{border:1px solid #ccc;padding:5px;}
  .modifyDiv{
    width:500px;
    border:1px solid purple;
    position:absolute;
    top:50%;left:50%;
    margin-left:-250px;
    margin-top:-100px;
    background:#fff;
    padding:10px;
    display:none;
    z-index:3;
    border:1px solid #ccc;
  }
  .modifyDiv p{border:1px solid #ccc;padding:5px;}

JQ:

$(function(){
    //查看
    $("td a.view").click(function(){
      /**添加遮罩層*/
      var maskHeight=$(document).height();
      var maskWidth=$(document).width();
      $("<div class='mask'></div>").appendTo($("body"));
      $("div.mask").css({
        "opacity":0.4,
        "background":"#000",
        "position":"absolute",
        "left":0,
        "top":0,
        "width":maskWidth,
        "height":maskHeight,
        "z-index":2
      })
      var arr=[];
      $(this).parent().siblings().each(function(){
        arr.push($(this).text());
      });
      $(".popDiv").show().children().each(function(i){
        $(this).children("span").text(arr[i]);
      });
      $(".close").click(function(){
        $(this).parent().hide();
        $(".mask").remove();
      });
    });
    //刪除
    $("a.del").click(function(){
      $(this).parents("tr").remove();
    });
    /*修改功能*/
  })

//在頁(yè)面裝載時(shí)，讓所有的td都擁有點(diǎn)擊事件
$(document).ready(function(){
  //找到所有td節(jié)點(diǎn)
  var tds = $("td").not(":last-child");
  //給所有的td節(jié)點(diǎn)增加點(diǎn)擊事件
  tds.dblclick(tdclick);
});

function tdclick(){
  var clickfunction = this;
  //0,獲取當(dāng)前的td節(jié)點(diǎn)
  var td = $(this);
  //1,取出當(dāng)前td中的文本內(nèi)容保存起來(lái)
  var text = $(this).text();
  //2，清空td里邊內(nèi)同
  td.html("");
  //3,建立一個(gè)文本框，也就是建一個(gè)input節(jié)點(diǎn)
  var input = $("<input>");
  //4,設(shè)置文本框中值是保存起來(lái)的文本內(nèi)容
  input.attr("value",text);
  //4.5讓文本框可以相應(yīng)鍵盤(pán)按下的事件
  input.keyup(function(event){
    //記牌器當(dāng)前用戶按下的鍵值
    var myEvent = event || window.event;//獲取不同瀏覽器中的event對(duì)象
    var kcode = myEvent.keyCode;
    //判斷是否是回車(chē)鍵按下
    if(kcode == 13){
      var inputnode = $(this);
      //獲取當(dāng)前文本框的內(nèi)容
      var inputext = inputnode.val();
      //清空td里邊的內(nèi)容,然后將內(nèi)容填充到里邊
      var tdNode = inputnode.parent();
      tdNode.html(inputext);
      //讓td重新?lián)碛悬c(diǎn)擊事件
      tdNode.click(tdclick);
    }
  }).blur(function(){
      var inputnode = $(this);
      //獲取當(dāng)前文本框的內(nèi)容
      var inputext = inputnode.val();
      //清空td里邊的內(nèi)容,然后將內(nèi)容填充到里邊
      var tdNode = inputnode.parent();
      tdNode.html(inputext);
      //讓td重新?lián)碛悬c(diǎn)擊事件
      tdNode.click(tdclick);
    });
  //5，把文本框加入到td里邊去
  td.append(input);
  //5.5讓文本框里邊的文章被高亮選中
  //需要將jquery的對(duì)象轉(zhuǎn)換成dom對(duì)象
  var inputdom = input.get(0);
  inputdom.select();

  //6,需要清楚td上的點(diǎn)擊事件
  td.unbind("click");
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論