Jquery 鼠标点击表格可以编辑内容

JS 代码：

<script type="text/javascript" >
$(function() {
    //找到表格的内容区域的奇数行,设定其样式
    $("tbody tr:even").css("background-color", "#ECE9D8");
    //找到所有学号的单元格
    var numTd = $("tbody td:even");
    //给这些单元格注册鼠标点击的事件。
    numTd.click(function() {
        //找到当前的td,this对应的就是相应可cilck的那个td
        var tdObj = $(this);
		if(tdObj.children("input").length > 0){ 
            //表示里面是有input的文本框，不执行click处理
            return false;
        }
        //取出当前td中的文本值
        var text = tdObj.text();
		var html = tdObj.html();
        //清空td中的内容
        tdObj.html("");

        var inputObj = $("<input type = 'text'>").css({"width":"100px","background":"#f5f5f5"}).val(text).appendTo(tdObj);
        //是文本框插入之后被选中
        inputObj.get(0).select();
		//alert(inputObj.attr("value");)
		inputObj.blur(function() {  
		var getObj = $(this).val();
		$(this).parent("td").html(html).find("a").text(getObj); 
		})
		
        inputObj.click(function(){
           return false; 
        });
		
        //处理文本框上回车和ESC按键的操作
        inputObj.keyup(function(event){
            //获取当前按键下的键值
            var keycode = event.which;
           //处理回车的情况
            if(keycode == 13){
              //获取当前文本框中的内容
                var inputtest = $(this).val();
                tdObj.html(inputtest);
            }
           //处理esc的情况
             if(keycode == 27){
              tdObj.html(text);
            }
        });
    });
});


    
    </script>

xhtml 代码：

<table>
    <thead>
    <tr>
        <th colspan="2">you can edit student Number when you click Student Number</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>Student Number</th>
        <th>Name</th>
    </tr>
    <tr>
        <td><a href="#">00001</a></td>
        <td>Laney</td>
    </tr>
    <tr>
        <td><a href="#">00002</a></td>
        <td>Angie</td>
    </tr>
    <tr>
        <td><a href="#">00003</a></td>
        <td>Eva</td>
    </tr>
    </tbody>
</table>

  
  


  
  

CSS代码：

input { border:1px solid #ccc; }