<html> <head> <meta charset="utf8"> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ // alert(0); $("#div_input").dblclick(function(){ // alert(0); // $(this).hide(); $("#text_input").val($("span").html()); $("span").hide();; $("#text_input").show().focus(); }); $("#text_input").blur(function(){ $("span").html($(this).val()).show(); $("#text_input").hide(); }); $("#table1 td").dblclick(function(){ var td = $(this); //获取当前的td // 根据表格文本创建文本框 并加入表表中--文本框的样式自己调整 var text = td.text(); //获取当前td里的内容 // alert(text); var txt = $("<input type='text'>").val(text); //当前td里的值放放input的框里 td.text(""); //清空td的值 td.append(txt); //向当前td里插入input框 txt.blur(function(){ // 失去焦点，保存值。于服务器交互自己再写,最好ajax var newText = $(this).val(); // 移除文本框,显示新值 $(this).remove(); td.text(newText); //新值放入当前td里 alert('修改成功'); }); }); }); </script> </head> <body> <div id="div_input" style="width:152px;height:22px;border:1px solid #369;"> <span style="overflow: hidden;">12123aa</span> <input id="text_input" type="text" style="display:none;width:152px;height:22px;overflow: hidden;" name="" value="123"> </div> <div> <table id="table1" border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </div> </body> </html><html> <head> <meta charset="utf8"> <script src="
阅读背景：
双击内容变input框可编辑，失去焦点后修改的数据异步提交
来源：互联网
分享到：
