html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>JQuery实例2：可以编辑的表格</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/editTable.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/editTable.js"></script>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <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>                                                                                                                                                                                    
// JavaScript Document
$(document).ready(function(){    
    $("tbody tr:even").css("background-color","#ccc");
    var numTd = $("tbody td:even");
    numTd.click(function(){
        var tdObj = $(this);
        if(tdObj.children("input").length>0){
            return false;    
        }
        var text = tdObj.html();
        //清空单击td的内容
        tdObj.html("");
        var inputObj = $("<input type='text' />").css("border-width","0").css("background-color",tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj);
        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);
            }
            //取消事件
            if(keycode == 27){
                tdObj.html(text);
            }
        });
     });
 });

  /* CSS Document */
table{
    width:100%;
    border-spacing:1px;
    border-collapse:collapse;
    border:1px solid #666;
    }
table th{
    border:1px solid #ccc;
    width:50%;
}
table td{
    border:1px solid #ccc;
    width:50%;
}