Jquery實現可編輯表格

1. JqueryEdit.html

 

<link rel="stylesheet" type="text/css" href="css/table.css">
<script type="text/javascript" src="jslib/jquery-1.2.6.js"></script>
      <script type="text/javascript" src="jslib/jqueryEdit.js"></script>

<table>
      <tr><td>用戶名</td>
        <td>密碼</td>
      </tr>
      <tr>
        <td>Sean</td>
        <td>123456</td>
      </tr>
    </table>

 

2. jqueryEdit.js

 

//在頁面加載時，讓所有的td擁有一個點擊事件
$(document).ready(function(){
  var tds = $("td");
  tds.click(tdClick);
});

function tdClick(){
  //保存當前的td節點
    var td = $(this);
    //取出當前td節點的文本內容並保存起來
    var text = td.text();
    //清空td裏面的內容
    td.html("");//也可以是td.empty();
    //建立一個文本框
    var input = $("<input>");
    //設置文本框的值是剛保存起來的
    input.attr("value",text);
    //將文本框加入到td中
    td.append(input);
    //讓文本框裏的文字高亮選中
    var inputDom = input.get(0);
    inputDom.select();
    //取消td的點擊事件
    td.unbind("click");
      //讓文本框響應鍵盤事件
    input.keyup(function(event){
      var myEvent = event || window.event;
      var keyCode = myEvent.keyCode;
      //判斷是否回車鍵按下
      if(keyCode == 13){
        //獲得文本框
        var inputNode = $(this);
        //保存文本框的值
        var inputText = inputNode.val();
        //獲得td節點
        var tdNode = inputNode.parent();
        //設置td的值
        tdNode.html(inputText);
        //讓td重新擁有點擊事件
        tdNode.click(tdClick);
      }
    });
    input.blur(function(){
      var inputNode = $(this);
      var inputText = inputNode.val();
      var tdNode = inputNode.parent();
      tdNode.html(inputText);
      tdNode.click(tdClick);
    });
  }

 

3.table.css

 

table,td{
  border-collapse: collapse;/*讓相鄰邊框合併*/
  border: 1px solid black;
}