| 标题 | 点击按钮文字变成input框,点击保存变成文字的实现代码 |
| 范文 | 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>2</td> 28. </tr> 29. <tr height="50"> 30. <td>小米5</td> 31. <td>5</td> 32. </tr> 33. </tbody> 34. <tfoot> 35. <tr> 36. <td colspan="2"> 37. <button type="button" 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框,点击保存变成文字的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。