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% ;
}