JQuery_可编辑表格

HTML

<table border="1px">

<tr>

 <td>222</td>

 <td>333</td>

<tr>

</table>

CSS

table,td{

 border-collapse:collapse;/*让相邻边框合并*/

 border:1px solid black;/*边框1像素*/

}

JS

//td被拥有一个点击

$(document).ready(function(){

  //找到所有td节点

   var tds = $("td");

  //增加点击

   tds.click(function(){

     //保存当前的td节点

    var td=$(this);

     //保存td中的文本内容

   var text = td.text();

    //清空td中的内容

    td.html();

    //建立一个文本框

    var input =$("input");

   //设置文本框的值是保存起来的内容

   input.attr("value",text);

 //响应键盘事件

 input.keyup(function(event){

     //获取用户按下的键值

      //解决不同游览器的差异

     var myEvent = event || window.event;

     var kcode = myEvent.keycode;

  //判断是否是回车键按下

      if(kcode==13){

    var  inputnode = ${this};  

      //保存当前文本的内容

     var inputtext = inputnode.val();

        //清空td的内容

            var tdNode = inputnode.parent();

        tdNode.html();

        //保存内容到填充到td中

        tdNode.html(inputtext);

       //让td重新拥有点击事件

       tdNode.click();

    }

 

  });

  //将文本框加入到td中

   td.append(input);//也可以用input.appendTo(td);

 //清除td的点击事件

   td.unbind("click");

 

 

})

 

})

 

function tdclick(){

 //找到所有td节点

   var tds = $("td");

  //增加点击

   tds.click(function(){

     //保存当前的td节点

    var td=$(this);

     //保存td中的文本内容

   var text = td.text();

    //清空td中的内容

    td.html();

    //建立一个文本框

    var input =$("input");

   //设置文本框的值是保存起来的内容

   input.attr("value",text);

 //响应键盘事件

 input.keyup(function(event){

     //获取用户按下的键值

      //解决不同游览器的差异

     var myEvent = event || window.event;

     var kcode = myEvent.keycode;

  //判断是否是回车键按下

      if(kcode==13){

    var  inputnode = ${this};  

      //保存当前文本的内容

     var inputtext = inputnode.val();

        //清空td的内容

            var tdNode = inputnode.parent();

        tdNode.html();

        //保存内容到填充到td中

        tdNode.html(inputtext);

       //让td重新拥有点击事件

       tdNode.click(tdclick);

    }

 

  });

  //将文本框加入到td中

   td.append(input);//也可以用input.appendTo(td);

//让文字框里面的文字被选中

    //首先是把jquery对象转化成demo对象

    var inputdom = input.get(0);

      inputdom.select();

 //清除td的点击事件

   td.unbind("click");

 

 

 

  }