Home >Web Front-end >HTML Tutorial >Click the button text to turn into an input box, click Save to turn into text implementation code

Click the button text to turn into an input box, click Save to turn into text implementation code

高洛峰Original: 2017-02-22 11:22:211035browse

Click the button text to turn into an input box, click to save and turn into text implementation code

XML/HTML Code Copy the content to the clipboard

<!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==&#39;修改&#39;){   
　　　　$(&#39;.edit&#39;).each(function(){   
　　　　　　var old=$(this).html();   
　　　　　　$(this).html("<input type=&#39;text&#39; name=&#39;editname&#39; class=&#39;text&#39; value="+old+" >");   
　　　　})   
　　　　$(obj).html(&#39;保存&#39;);   
　　}else if(xg==&#39;保存&#39;){   
　　　　$(&#39;input[name=editname]&#39;).each(function(){   
　　　　　　var old=$(this).html();   
　　　　　　var newfont=$(this).parent(&#39;td&#39;).parent(&#39;tr&#39;).children().find(&#39;input&#39;).val();   
　　　　　　$(this).parent(&#39;td&#39;).html(newfont);   
　　　　})   
　　　　$(obj).html(&#39;修改&#39;);   
　　}   
}   
</script>  
  
  
  
</body>  
</html>

The implementation code of the above article, click the button text to become an input box, click save to become text, is all the content shared by the editor. , I hope it can give everyone a reference, and I also hope everyone will support the PHP Chinese website.

For more related articles on the implementation code of clicking the button text to turn it into an input box, and clicking save to turn it into text, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：canvas.toDataURL image/png Recommended error handling methodsNext article：canvas.toDataURL image/png Recommended error handling methods

See more

Click the button text to turn into an input box, click Save to turn into text implementation code

Related articles