html部分很简单

        
     
                  
                       
                            
鼠标点击表格项就可以编辑
                       
                  
                  
                       
                            
学号
                            
姓名
                       
                       
                            
000001
                            
张三
                       
                       
                            
000002
                            
李四
                       
                       
                            
000003
                            
王五
                       
                       
                            
000004
                            
赵六
                       
                  
             
    

css也比较简单

*{
   margin:0px;padding:0px;}table{
       border:1px solid black;    margin:0 auto;    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:#A3BAE7;}

最主要的是jQuery部分，其主要思路是：

当鼠标点击单元格的时候触发事件，该事件会在单元格中添加一个输入框input，这样就可以输入相应的文字了

$(function(){    //找到表格的内容区域中所有的奇数行,并设置不同颜色    $("tbody tr:even").css("background-color","#ECE9D8");    //找到所有的学号单元格    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中的内容        tdObj.html("");        //1.创建一个文本框 2.去掉文本框的边框 3.设置文本框中的文字字体大小是16px         //4.使文本框的宽度和td的宽度相同 5.设置文本框的背景色        //6.需要将当前td中的内容放到文本框中 7.将文本框插入到td中        var inputObj = $("").css("border-width","0")            .css("font-size","16px").width(tdObj.width())            .css("background-color",tdObj.css("background-color"))            .val(text).appendTo(tdObj);        //是文本框插入之后就被选中        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);            }        });    });});