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