點(diǎn)擊按鈕文字變成input框,點(diǎn)擊保存變成文字的實(shí)現(xiàn)代碼
來源:易賢網(wǎng) 閱讀:1271 次 日期:2016-06-14 16:22:15
溫馨提示:易賢網(wǎng)小編為您整理了“點(diǎn)擊按鈕文字變成input框,點(diǎn)擊保存變成文字的實(shí)現(xiàn)代碼”,方便廣大網(wǎng)友查閱!

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>點(diǎn)擊按鈕文字變成input框,點(diǎn)擊保存變成文字</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">件數(shù)</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>  

以上這篇點(diǎn)擊按鈕文字變成input框,點(diǎn)擊保存變成文字的實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考。

更多信息請查看網(wǎng)頁制作
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)