点击按钮文字变成input框,点击保存变成文字的实现代码

 
 XML/HTML Code  复制内容到剪贴板 

 
       <!DOCTYPE html  >       
        <  html     lang  =  "en"  >      
        <  head  >      
      　　  <  meta     http-equiv  =  "Content-Type"     content  =  "text/html; charset=utf-8"     />      
      　　  <  meta     charset  =  "utf-8"  >      
      　　  <  title  >  点击按钮文字变成input框，点击保存变成文字  </  title  >      
      　　  <  style     type  =  "text/css"  >      
      　　table{ text-align: center; font-size: 14px;}     
      　　table  >  thead  >  tr  >  th{ font-weight: normal;}     
      　　.text-right{ padding-right:73px; text-align: right;}     
      　　.text{ width: 50px; height: 30px; border: 1px solid #ddd; text-align: center;}     
      　　  </  style  >      
      　　  <  script     type  =  "text/javascript"     src  =  "js/jquery.min.js"  >  </  script  >      
        </  head  >      
          
        <  body  >      
      　　  <  table  >      
      　　　　  <  thead  >      
      　　　　　　  <  tr  >      
      　　　　　　　　  <  th     width  =  "400"  >  品名  </  th  >      
      　　　　　　　　  <  th     width  =  "200"  >  件数  </  th  >      
      　　　　　　  </  tr  >      
      　　　　  </  thead  >      
      　　　　  <  tbody  >      
      　　　　　　  <  tr     height  =  "50"  >      
      　　　　　　　　  <  td  >  iPhone6s  </  td  >      
      　　　　　　　　  <  td     class  =  "edit"  >  2  </  td  >      
      　　　　　　  </  tr  >      
      　　　　　　  <  tr     height  =  "50"  >      
      　　　　　　　　  <  td  >  小米5  </  td  >      
      　　　　　　　　  <  td     class  =  "edit"  >  5  </  td  >      
      　　　　　　  </  tr  >      
      　　　　  </  tbody  >      
      　　　　  <  tfoot  >      
      　　　　　　  <  tr  >      
      　　　　　　　　  <  td     colspan  =  "2"     class  =  "text-right"  >      
      　　　　　　　　　　  <  button     type  =  "button"     class  =  "btn"     onclick  =  "change(this)"  >  修改  </  button  >      
      　　　　　　　　  </  td  >      
      　　　　　　  </  tr  >      
      　　　　  </  tfoot  >      
      　　  </  table  >      
          
        <  script     type  =  "text/javascript"  >      
      function change(obj){     
      　　var   xg  =$(obj).html();     
      　　if(  xg  =='修改'){     
      　　　　$('.edit').each(function(){     
      　　　　　　var   old  =$(this).html();     
      　　　　　　$(this).html("  <  input     type  =  'text'     name  =  'editname'     class  =  'text'     value  =  "+old+"     >  ");     
      　　　　})     
      　　　　$(obj).html('保存');     
      　　}else if(  xg  =='保存'){     
      　　　　$('input[  name  =  editname  ]').each(function(){     
      　　　　　　var   old  =$(this).html();     
      　　　　　　var   newfont  =$(this).parent('td').parent('tr').children().find('input').val();     
      　　　　　　$(this).parent('td').html(newfont);     
      　　　　})     
      　　　　$(obj).html('修改');     
      　　}     
      }     
        </  script  >      
          
          
          
        </  body  >      
        </  html  >      
 


以上这篇点击按钮文字变成input框,点击保存变成文字的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://www.cnblogs.com/yuxiaoqi912/p/5470354.html

      查看更多关于点击按钮文字变成input框,点击保存变成文字的实现代码的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did37534
更新时间：2022-09-23 阅读：42次