双击内容变input框可编辑，失去焦点后修改的数据异步提交 

<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>
posted @ 2018-08-29 05:22  HaimaBlog  阅读(1187)  评论(0)  编辑  收藏  举报