点击按钮文字变成input框,点击保存变成文字的实现代码
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <metacharset="utf-8"> <title>点击按钮文字变成input框，点击保存变成文字</title> <styletype="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:1pxsolid#ddd;text-align:center;} </style> <scripttype="text/javascript"src="js/jquery.min.js"></script> </head> <body> <table> <thead> <tr> <thwidth="400">品名</th> <thwidth="200">件数</th> </tr> </thead> <tbody> <trheight="50"> <td>iPhone6s</td> <tdclass="edit">2</td> </tr> <trheight="50"> <td>小米5</td> <tdclass="edit">5</td> </tr> </tbody> <tfoot> <tr> <tdcolspan="2"class="text-right"> <buttontype="button"class="btn"onclick="change(this)">修改</button> </td> </tr> </tfoot> </table> <scripttype="text/javascript"> functionchange(obj){ varxg=$(obj).html(); if(xg=='修改'){ $('.edit').each(function(){ varold=$(this).html(); $(this).html("<inputtype='text'name='editname'class='text'value="+old+">"); }) $(obj).html('保存'); }elseif(xg=='保存'){ $('input[name=editname]').each(function(){ varold=$(this).html(); varnewfont=$(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