Klicken Sie auf die Schaltfläche Text, um ihn in ein Eingabefeld umzuwandeln, und klicken Sie auf Speichern, um ihn in Textimplementierungscode umzuwandeln-HTML-Tutorial-php.cn

Klicken Sie auf die Schaltfläche Text, um ihn in ein Eingabefeld umzuwandeln, und klicken Sie auf Speichern, um ihn in Textimplementierungscode umzuwandeln

高洛峰

Freigeben： 2017-02-22 11:22:21

Original

991 Leute haben es durchsucht

Klicken Sie auf die Schaltfläche Text, um ein Eingabefeld zu werden, klicken Sie auf Speichern, um den Textimplementierungscode zu werden

XML/HTML-Code Kopieren Sie den Inhalt in die Zwischenablage

<!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>

Nach dem Login kopieren

Der obige Artikel klickt auf die Schaltfläche „Text“, um ein Eingabefeld zu werden, und klickt auf „Speichern“, um ihn in Text umzuwandeln Der Code ist alles, was der Herausgeber mit Ihnen geteilt hat. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Implementierungscodes zum Klicken auf den Schaltflächentext in einem Eingabefeld und zum Klicken auf Speichern, um ihn in Text umzuwandeln, finden Sie auf der chinesischen PHP-Website für verwandte Artikel!