Click on the button to change the text into an input box, and click Save to change the implementation code into text.

Time:2019-8-12

Click on the button to change the text into an input box, and click Save to change the implementation code into text.

XML/HTML CodeCopy content to clipboard
  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>Click the button to change text into input box, Click Save to change text</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”>Product Name</th>  
  21.         <th width=“200”>Number</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>Millet 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)”>modify</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==’Modification’){
  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 (‘save’);
  52.   }else if(xg==’Preserve’){
  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 (‘modification’);
  59.   }   
  60. }   
  61. </script>  
  62.   
  63.   
  64.   
  65. </body>  
  66. </html>  

The above click button text into the input box, Click Save into the text of the implementation code is the editor to share all the content, I hope to give you a reference, but also hope that you support more developpaer.

Original address: http://www.cnblogs.com/yuxiaoqi912/p/5470354.html

Recommended Today

Protocol basis: use telnet to learn IMAP protocol

IMAP introduction IMAPThe full name is Internet Mail Access Protocol, or Interactive Mail Access ProtocolPOP3Similar to one of the mail access standard protocols. The difference is, it’s onIMAPAfter that, the e-mail you received from the e-mail client remains on the server, and the operations on the client will be fed back to the server, such […]