jQuery實(shí)現(xiàn)點(diǎn)擊按鈕文字變成input框點(diǎn)擊保存變成文字
更新時(shí)間:2016年05月09日 14:17:36 作者:萌魚
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊按鈕文字變成input框點(diǎn)擊保存變成文字的相關(guān)資料,非常具有參考借鑒價(jià)值,需要的朋友可以參考下
廢話不多說,直接給大家貼代碼了。
具體代碼如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"> <title>點(diǎn)擊按鈕文字變成input框,點(diǎn)擊保存變成文字</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">件數(shù)</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>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框?qū)嵗a
- jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的方法
- jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的簡單實(shí)例
- JavaScript和jQuery獲取input框的絕對(duì)位置實(shí)現(xiàn)方法
- 讓input框?qū)崿F(xiàn)類似百度的搜索提示(基于jquery事件監(jiān)聽)
- jquery的選擇器的使用技巧之如何選擇input框
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框代碼實(shí)例
相關(guān)文章
通過上下左右鍵和回車鍵切換光標(biāo)實(shí)現(xiàn)代碼
客戶有這樣一個(gè)需求在列表中的文本框里輸入數(shù)據(jù)時(shí),要能夠通過上下左右鍵來切換光標(biāo),按回車鍵就把光標(biāo)移到下一個(gè)文本框,接下來將為你介紹下如何實(shí)現(xiàn),感興趣的朋友可以參考下2013-03-03jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
這篇文章主要介紹了jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jQuery實(shí)現(xiàn)凍結(jié)表格行和列
本文給大家分享的是前些日子做的項(xiàng)目中的一個(gè)客戶的特殊要求,很少遇到,查詢了好久的度娘,才算找到解決方案,這里分享給大家,有需要的小伙伴可以參考下。2015-04-04jQuery手動(dòng)點(diǎn)擊實(shí)現(xiàn)圖片輪播特效
這篇文章主要為大家詳細(xì)介紹了jQuery手動(dòng)點(diǎn)擊實(shí)現(xiàn)圖片輪播特效,手動(dòng)點(diǎn)擊數(shù)字卡片實(shí)現(xiàn)圖片輪播,對(duì)圖片輪播感興趣的小伙伴們可以參考一下2015-12-12jquery控制listbox中項(xiàng)的移動(dòng)并排序的實(shí)現(xiàn)代碼
listbox中項(xiàng)的移動(dòng)并排序的jquery實(shí)現(xiàn)代碼,使用jquery與listbox的朋友可以參考下。2010-09-09jQuery驗(yàn)證Checkbox是否選中的代碼 推薦
jQuery驗(yàn)證Checkbox是否選中的代碼,需要的朋友可以參考下。建議大家看下腳本之家的相關(guān)文章。2011-09-09