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>

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

}