jQuery实现点击按钮文字变成input框点击保存变成文字
废话不多说，直接给大家贴代码了。
具体代码如下所示：
<!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>