用css和jQuery实现简单表格编辑

首先做一个简单的表格
 <table>
  <thead>
   <tr>
    <td colspan="2">可以编辑的表格</td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th>学号</th>
    <th>姓名</th>
   </tr>
   <tr>
    <td>1001</td>
    <td>张三</td>
   </tr>
   <tr>
    <td>1002</td>
    <td>李四</td>
   </tr>
   <tr>
    <td>1003</td>
    <td>王二</td>
   </tr>
   <tr>
    <td>1004</td>
    <td>麻子</td>
   </tr>
  </tbody>
 </table>

css代码
/* CSS Document */
table{
 border: 1px solid black;
 /*修正单元格直接的边框不能合并*/
 border-collapse:collapse;
 width:400px;
}
table td{
 border:1px solid black;
 width:50%;
}
table th{
 border:1px solid black;
 width:50%;
}
tbody th{
 background-color:#CCCCFF
}

js代码
// JavaScript Document
$(function(){
   //找到表格内容区域偶数行，更改背景色
      $("tbody tr:even").css("background-color","#ECE9D8");
   var numTd = $("tbody td:even");
   numTd.dblclick(function(){
     var tdObj = $(this);
     var txt;
     if(tdObj.index("input")==1)
     txt="";
     else
     txt = tdObj.html();
     tdObj.html("");
     //创建一个文本框，去掉边框，设置字体，设置文本框背景色，放入td中
     var inputObj = $("<input type='text'>").css("border-width","0").css("font-size","16px").width(tdObj.width())
     .css("background-color",tdObj.css("background-color")).val(txt)
     .appendTo(tdObj);
     /*inputObj.focus(function(){
    inputObj.select();      
     });*/
     //是文本框插入之后立即被选中
     inputObj.trigger("focus").trigger("select");
     inputObj.click(function(){
          return false;
      });
     inputObj.keyup(function(event){
    var keyCode = event.which;
    //回车
    if(keyCode == 13){
      var inputText = $(this).val();
      tdObj.html(inputText);
    }
    //ESC
    if(keyCode == 27){
     tdObj.html(txt);
    }
      });
   });
});