<HTML><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"/> <style>Table{Border-collapse:collapse;border-spacing:0;Margin-right:Auto;Margin-left:Auto;width:100%; }TH,TD{Border:1px solid #b5d6e6;font-size:12px;Font-weight:Normal;vertical-align:Middle;Height:20px;width:25%; }th{text-align:Center;Background-color:Gray; } </style> <Scriptsrc= "Http://code.jquery.com/jquery-1.10.2.js"></Script> <Script> $(function(){$('#tableId'). On ('DblClick','TD',function(){ //Console.info ($ (this). text ()); varOldval= $( This). text (); varinput= "<input type= ' text ' id= ' tmpid ' value= '" +Oldval+ "' >"; $( This). Text ("'); $( This). append (input); $('#tmpId'). focus (); $('#tmpId'). Blur (function(){ if($( This). Val ()!= "') {Oldval= $( This). Val (); } //closest: Starts at the current element and traverses up the DOM tree until it finds a match that has been applied to the selector. $( This). Closest ('TD'). Text (oldval); }); });});</Script></Head><Body><TableID= "TableId"> <TR><th>Head01</th><th>Head02</th><th>Head03</th><th>Head04</th></TR> <TR><TD>Head11</TD><TD>Head12</TD><TD>Head13</TD><TD>Head14</TD></TR> <TR><TD>Head21</TD><TD>Head22</TD><TD>Head23</TD><TD>Head24</TD></TR> <TR><TD>Head31</TD><TD>Head32</TD><TD>Head33</TD><TD>Head34</TD></TR> <TR><TD>Head41</TD><TD>Head42</TD><TD>Head43</TD><TD>Head44</TD></TR> </Table></Body></HTML>
Use jquery to double-click to modify TD in Table