今天学习到了一个实例，其名称为的能够编辑的表格。

事实上现的效果是：点击页面上的单元格，单元格中的内容变成选中状态，变成能够输入的状态。向单元格中输入内容，按下回车。单元格保存其改动后的结果，按ESC，单元格的内容还原成原来的内容。

其原理是：点击单元格的时候。在单元格内加入一个文本框，其大小充满整个单元格，其内容为单元格中的内容，改动后的内容又一次赋给单元格。

　　HTML代码：

　　

              
                  
      
               
                    
                         
    
                             鼠标点击表格就能够编辑                
                    
               
               
                    
                         
学号
                         
姓名
                    
                    
                         
0001
                         
张三
                    
                    
                         
0002
                         
李四
                    
                    
                         
0003
                         
王五
                    
                    
                         
0004
                         
赵六
                    
               
          

　　CSS代码：

body {}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:blue;}

　　JQuery代码：

//解决奇偶行的背景色不一样//$(document).ready(function () {//});//简化的ready写法$(function () {    //找到表格的内容区域中除了第一个tr外的全部奇数行    //使用even是为了把tbody tr 返回的全部tr元素中，在数组里面下标是偶数的元素返回，由于这些元素，实际上才是我们期望的奇数行。奇数行（odd）    $("tbody tr:even").css("background-color", "#999");    //找到全部的学号的单元格    //$("tbody td:even").css("background-color", "red");    var numTd = $("tbody td:even");    //给这些单元格注冊鼠标点击的事件    numTd.click(function () {        //找到当前鼠标点击的td，this相应的就是响应了click的那个td        var tdobj = $(this);        if (tdobj.children("input").length > 0) {            //当前td中的input。不运行click处理            return false;        }        var text = tdobj.html();        //创建一个文本框        //去掉文本框的边框        //设置文本框中的文字的大小        //使文本框的宽度与td宽度同样        //设置文本框的背景色        //须要将当前td中的内容放到文本框中        var inputobj = $("").css("border-width", "0").css("font-size", "16px").width(tdobj.width()).css("background-color", tdobj.css("background-color")).val(text);        //清空td中的内容        tdobj.html("");        //将文本库插入到td中        inputobj.appendTo(tdobj);        //文本框插入后就选中        inputobj.trigger("focus").trigger("select");        inputobj.get(0).select();        inputobj.click(function () {            return false;        });        //处理文本框上的回车和ESC按键的操作        inputobj.keyup(function (event) {            //获取键值            var keycode = event.which;            //处理回车的情况            if (keycode == 13) {                //获取当前文本框的内容                var inputtext = inputobj.val();                tdobj.html(inputtext);            }            if (keycode == 27) {                tdobj.html(text);            }        });    });});

　　以上就是整个实例的代码了。

1. HTML总结：
   1. table中能够包括thead和tbody
   2. 表头的内容能够放在th中
2. CSS总结：
   1. 能够通过border-collaspse:collapse 这样的方式来使表格中的单元格的边框合并。
   2. 当th上有背景色时，这个th属于tr上定义的背景色会无效。
3. JQuery总结：
   1. $(function(){})是$(document).ready(function(){})的简化写法。
   2. $("tbody tr:even")能够返回tbody中全部索引值为偶数的tr节点（：odd  是为奇数的tr节点）。

   3. function中的this代表运行这个function的对象
   4. children方法能够获得某个节点的子节点。能够制定參数来限制子节点的内容
   5. html方法能够设置或获取节点的HTML内容
   6. val方法能够获取或设置节点的value值
   7. appendTo方法能够将一个节点追加到还有一个节点全部子节点的后面
   8. trigger方法能够触发某个Javascript的事件发生
   9. Jquery中某个方法的參数function上能够定义一个event的參数，Jquery会屏蔽浏览器的event差异，传给我们一个可用的event对象
   10. Jquery的event对象上有一个which的属性，能够获得键盘按键的键值（13=回车，27=ESC）

　　仅仅有通过不断地实践，不断的总结，编制知识网。和学过的知识联系起来，那么我们的收获才是巨大的。