Heim >Web-Frontend >HTML-Tutorial >Klicken Sie auf die Schaltfläche Text, um ein Eingabefeld zu werden, und klicken Sie auf Speichern, um eine Textimplementierung zu erstellen
Klicken Sie auf die Schaltfläche Text, um ein Eingabefeld zu werden, und klicken Sie auf Speichern, um eine Textimplementierung zu erstellen
- 不言Original
- 2018-06-26 10:52:412252Durchsuche
Im Folgenden finden Sie einen Implementierungscode, mit dem Sie auf die Schaltfläche „Text“ klicken, um ihn in ein Eingabefeld umzuwandeln, und auf „Speichern“ klicken, um ihn in Text umzuwandeln. Der Inhalt ist recht gut. Ich möchte ihn jetzt mit Ihnen teilen und als Referenz verwenden.
Klicken Sie auf den Schaltflächentext, um ihn in ein Eingabefeld umzuwandeln, klicken Sie auf Speichern, um ihn in Textimplementierungscode umzuwandeln
<!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>Das Obige ist dieser Artikel Der gesamte Inhalt, ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
Einführung in die mobile Web-Bildschirmanpassung (rem)
So verwenden Sie HTML in zwei Zeichnen a vertikale Linie zwischen jedem div-Tag
Das obige ist der detaillierte Inhalt vonKlicken Sie auf die Schaltfläche Text, um ein Eingabefeld zu werden, und klicken Sie auf Speichern, um eine Textimplementierung zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!