Heim >Web-Frontend >HTML-Tutorial >Klicken Sie auf die Schaltfläche Text, um ihn in ein Eingabefeld umzuwandeln, und klicken Sie auf Speichern, um ihn in Textimplementierungscode umzuwandeln
Klicken Sie auf die Schaltfläche Text, um ihn in ein Eingabefeld umzuwandeln, und klicken Sie auf Speichern, um ihn in Textimplementierungscode umzuwandeln
- 高洛峰Original
- 2017-02-22 11:22:211035Durchsuche
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=='修改'){
$('.edit').each(function(){
var old=$(this).html();
$(this).html("<input type='text' name='editname' class='text' value="+old+" >");
})
$(obj).html('保存');
}else if(xg=='保存'){
$('input[name=editname]').each(function(){
var old=$(this).html();
var newfont=$(this).parent('td').parent('tr').children().find('input').val();
$(this).parent('td').html(newfont);
})
$(obj).html('修改');
}
}
</script>
</body>
</html>
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!