点击按钮文字变成input框,点击保存变成文字的实现代码
导读:收集整理的这篇文章主要介绍了点击按钮文字变成input框,点击保存变成文字的实现代码,觉得挺不错的,现在分享给大家,也给大家做个参考。 点击按钮文字变成input框,点击保存变成文字的实现代码XML/HTML Code@H_512...
收集整理的这篇文章主要介绍了点击按钮文字变成input框,点击保存变成文字的实现代码,觉得挺不错的,现在分享给大家,也给大家做个参考。 点击按钮文字变成input框,点击保存变成文字的实现代码
XML/HTML Code@H_512_9@复制内容到剪贴板- !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
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 点击按钮文字变成input框,点击保存变成文字的实现代码
本文地址: https://pptw.com/jishu/588262.html