Maison > Article > interface Web > Cliquez sur le texte du bouton pour le transformer en zone de saisie, cliquez sur Enregistrer pour le transformer en code d'implémentation de texte
Cliquez sur le texte du bouton pour le transformer en zone de saisie, cliquez sur Enregistrer pour le transformer en code d'implémentation de texte
- 高洛峰original
- 2017-02-22 11:22:21996parcourir
Cliquez sur le bouton Texte pour devenir une zone de saisie, cliquez sur Enregistrer pour devenir le code d'implémentation du texte
Code XML/HTML Copiez le contenu dans le presse-papiers
<!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>
L'article ci-dessus clique sur le texte du bouton pour devenir une zone de saisie, et clique sur Enregistrer pour le transformer en texte. le code est tout ce que l'éditeur a partagé avec vous. Le contenu est complet, j'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra le site Web PHP chinois.
Pour plus de code d'implémentation consistant à cliquer sur le texte du bouton dans une zone de saisie et à cliquer sur Enregistrer pour le transformer en texte, veuillez faire attention au site Web PHP chinois pour les articles connexes !