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>热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短