<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">關閉</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>

#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;}

$(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();    });    /*修改功能*/  })//在頁面裝載時，讓所有的td都擁有點擊事件$(document).ready(function(){  //找到所有td節點  var tds = $("td").not(":last-child");  //給所有的td節點增加點擊事件  tds.dblclick(tdclick);});function tdclick(){  var clickfunction = this;  //0,獲取當前的td節點  var td = $(this);  //1,取出當前td中的文本內容保存起來  var text = $(this).text();  //2，清空td里邊內同  td.html("");  //3,建立一個文本框，也就是建一個input節點  var input = $("<input>");  //4,設置文本框中值是保存起來的文本內容  input.attr("value",text);  //4.5讓文本框可以相應鍵盤按下的事件  input.keyup(function(event){    //記牌器當前用戶按下的鍵值    var myEvent = event || window.event;//獲取不同瀏覽器中的event對象    var kcode = myEvent.keyCode;    //判斷是否是回車鍵按下    if(kcode == 13){      var inputnode = $(this);      //獲取當前文本框的內容      var inputext = inputnode.val();      //清空td里邊的內容,然后將內容填充到里邊      var tdNode = inputnode.parent();      tdNode.html(inputext);      //讓td重新擁有點擊事件      tdNode.click(tdclick);    }  }).blur(function(){      var inputnode = $(this);      //獲取當前文本框的內容      var inputext = inputnode.val();      //清空td里邊的內容,然后將內容填充到里邊      var tdNode = inputnode.parent();      tdNode.html(inputext);      //讓td重新擁有點擊事件      tdNode.click(tdclick);    });  //5，把文本框加入到td里邊去  td.append(input);  //5.5讓文本框里邊的文章被高亮選中  //需要將jquery的對象轉換成dom對象  var inputdom = input.get(0);  inputdom.select();  //6,需要清楚td上的點擊事件  td.unbind("click");}