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

2017-03-27 09:26:37 html
下面小编就为大家带来一篇点击按钮文字变成input框,点击保存变成文字的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
点击按钮文字变成input框,点击保存变成文字的实现代码

    <!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