XML/HTML Code
1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <meta charset="utf-8">
6. <title>點擊按鈕文字變成input框，點擊保存變成文字</title>
7. <style type="text/css">
8. table{ text-align: center; font-size: 14px;}
9. table>thead>tr>th{ font-weight: normal;}
10. .text-right{ padding-right:73px; text-align: right;}
11. .text{ width: 50px; height: 30px; border: 1px solid #ddd; text-align: center;}
12. </style>
13. <script type="text/javascript" src="js/jquery.min.js"></script>
14.</head>
15.
16.<body>
17. <table>
18. <thead>
19. <tr>
20. <th width="400">品名</th>
21. <th width="200">件數</th>
22. </tr>
23. </thead>
24. <tbody>
25. <tr height="50">
26. <td>iPhone6s</td>
27. <td class="edit">2</td>
28. </tr>
29. <tr height="50">
30. <td>小米5</td>
31. <td class="edit">5</td>
32. </tr>
33. </tbody>
34. <tfoot>
35. <tr>
36. <td colspan="2" class="text-right">
37. <button type="button" class="btn" onclick="change(this)">修改</button>
38. </td>
39. </tr>
40. </tfoot>
41. </table>
42.
43.<script type="text/javascript">
44.function change(obj){
45. var xg=$(obj).html();
46. if(xg=='修改'){
47. $('.edit').each(function(){
48. var old=$(this).html();
49. $(this).html("<input type='text' name='editname' class='text' value="+old+" >");
50. })
51. $(obj).html('保存');
52. }else if(xg=='保存'){
53. $('input[name=editname]').each(function(){
54. var old=$(this).html();
55. var newfont=$(this).parent('td').parent('tr').children().find('input').val();
56. $(this).parent('td').html(newfont);
57. })
58. $(obj).html('修改');
59. }
60.}
61.</script>
62.
63.
64.
65.</body>
66.</html>
以上這篇點擊按鈕文字變成input框,點擊保存變成文字的實現代碼就是小編分享給大家的全部內容了，希望能給大家一個參考。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
