啊哈，初学JQuery，闲来无事，好奇表格的编辑功能怎么用最简单的方法实现哇

于是乎！！！

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可以编辑的表格</title>
    <link rel="stylesheet" type="text/css" href="css/editTable.css">
    <!-- <script type="text/javascript" src="jquery-3.2.1.min.js"></script> -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/editTable.js"></script>

</head>
<body>
    <table>
        <thead>
            <t>
                <th colspan="2">   鼠标点击表格项就可以编辑
                </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>000001</td>
                <td>张三</td>    
            </tr>
            <tr>
                <td>000002</td>
                <td>李四</td>    
            </tr>
            <tr>
                <td>000003</td>
                <td>王五</td>    
            </tr>
            <tr>
                <td>000004</td>
                <td>赵六</td>    
            </tr>
        </tbody>
    </table>
</body>
</html>

editTable.css

table {
    border:1px solid black;
    border-collapse: collapse;
    width:400px;
}

table td {
    border:1px solid black;
    width: 50%;
}

tbody th {
    background-color: #A3BAE9;
}
table th {
    border:1px solid black;
    width: 50%;
}

editTable.js

$(function (){
    //找到偶数行
    //使用even是为了把通过tbody tr返回的所有tr元素中，
    //在数组里面下标是偶数的元素返回，因为这些才是我们期望的tbody的奇数行
    $("tbody tr:even").css("background-color","#ECE9D8");
    //需要找到所有的学号单元格
   // $("tbody td:even").css("background-color","red");
    var numTd = $("tbody td:even");
    numTd.click(function(){
      //找到当前鼠标点击的td
       var tdObj = $(this) ;
       if (tdObj.children("input").length > 0) {
           //当前td中input不执行click处理
               return false;
       }
       var text = tdObj.html();
        //清空
       tdObj.html("");
        //创建文本框
        //去掉文本框
        //设置文本框的文字字体为16px
        //使文本框的宽度和td的宽度相同
        //设置文本框的背景色
        //插入之前将当前的内容放到文本框中
       var inputObj=$("<input type='text'>").css("border-width","0")
           .css("font-size","16px")
           .css("background-color",tdObj.css("background-color"))
           .width(tdObj.width()).val(text)
           .appendTo(tdObj);
           //使文本框插入之后就被选中
           //inputObj.get(0).select();//safari浏览器不支持
       inputObj.trigger("focus").trigger("select");//所有浏览器都支持
       inputObj.click(function(){
           return false;
       });
       //处理文本框上回车和esc按键的操作
       inputObj.keyup(function(event){
           //获取当前键值
           var keycode = event.which;
               //处理回车的情况
            if (keycode == 13) {
                //获取当前文本框的内容
                var inputtext = $(this).val();
                //将td的内容修改成文本框中的内容
                tdObj.html(inputtext);
            }
               //处理esc的情况
           if (keycode == 27) {
               //将td中的内容还原成text
               tdObj.html(text);
           }
       });
     });
});

总结：

       1.table中可以包含thead和tbody

       2.表头的内容可以放到th中

       3.可以通过border-collapse:collapse使表格中的单元格的边框合并

       4.当th上有背景色时会覆盖掉tr的背景色

       5.$(function(){})是$(document).ready(function(){})的简化写法

       6.$("tbody tr")可以返回tbody中所有tr节点

       7..$("tbody tr:even")可以返回tbody中所有索引值是偶数的tr节点

        8.css方法可以用于设定或获取节点的css属性，参数名是css的属性名

        9.JQuery的对象内容包含着选择器对应的DOM节点，以数组形式保存

        10.get方法可以获得JQuery对象中包含的某一个DOM节点

         11.function中的this代表执行这个function的对象

         12.$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象

         13.children方法可以获得某个节点的子节点，可以制定参数来限制子节点的内容

         14.如果选择器返回的JQuery对象中包含多个DOM节点，在这个对象上注册类似click这样的事件时，所有DOM节点都会用于事件

         15.html方法可以设置或获取节点的HTML内容

         16.val方法可以获取或设置节点的value值

         17.$()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成JQuery对象

         18.JQuery 大部分方法都会返回执行这个方法的JQuery对象，因此可以采用链式方法的写法来编写给予JQUERY的代码

          19.width方法可以设置或获取某个节点的宽度

           20.appendTo方法可以将一个节点追加到另一个节点所有子节点的后面

           21.阻止事件传递可以让当前节点的事件返回false

           22.trigger方法可以触发某个javascript的事件发生

           23.JQuery中某个事件方法的参数function上可以定义一个event的参数，JQuery会屏蔽浏览器的event差异，传给我们一个可用的event对象

           24.JQuery的event对象上有一个which的属性可以获得键盘按键的键值

           25.13表示回车键，27表示ESC键