Maison >interface Web >tutoriel HTML >Cliquez sur le texte du bouton pour devenir une zone de saisie, cliquez sur Enregistrer pour devenir une implémentation de texte
Cliquez sur le texte du bouton pour devenir une zone de saisie, cliquez sur Enregistrer pour devenir une implémentation de texte
- 不言original
- 2018-06-26 10:52:412227parcourir
Ce qui suit vous apportera un code d'implémentation pour cliquer sur le texte du bouton pour le transformer en zone de saisie, et cliquer sur Enregistrer pour le transformer en texte. Le contenu est assez bon, j'aimerais le partager avec vous maintenant et le donner comme référence.
Cliquez sur le bouton texte pour le transformer en zone de saisie, cliquez sur Enregistrer pour le transformer en code d'implémentation de texte
<!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>Ci-dessus, c'est tout le contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Introduction à l'adaptation d'écran Web mobile (rem)
Comment utiliser le HTML en deux Dessinez un ligne verticale entre chaque balise div
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!