JS雙擊變input框批量修改內(nèi)容
雙擊空白或者文字變成input框修改內(nèi)容:
html代碼
<td class="center" ondblclick="ShowElement(this,'intro')">{$vo.intro}</td> <td class="center" ondblclick="ShowElement(this,'address')">{$vo.address}</td>
js代碼
//雙擊修改 function ShowElement(element,abc){ // console.log(abc); var list = abc; var me = element; var oldhtml = element.innerHTML; var newobj = document.createElement('input'); newobj.type = 'text';//修改新創(chuàng)建的input的類型 element.innerHTML = '';//清空td中的內(nèi)容用于存放新創(chuàng)建input; $(newobj).attr({ value:oldhtml}); element.appendChild(newobj);//把input放入td //給input對象綁定鼠標移開事件 newobj.onblur = function(){ // 判斷是否滿足發(fā)送ajax的條件 if(this.value != oldhtml){ element.innerHTML = this.value; var value = this.value; // alert(value); //發(fā)送ajax請求 var id = $(me).parents('.gradeA').find('.sid').html(); var url = "{:U('Admin/Friend/onclick')}"; var btn = $(this); $.ajax({ url:url, data:{id:id,list:list,value:value}, type:'post', success:function(data){ console.log(data); if(data == 0){ alert('修改成功') }else{ alert('修改失敗'); } } }) }else{ element.innerHTML = oldhtml;//放入原來的內(nèi)容 // return false; } } newobj.focus(); // return false; }
以上所述是小編給大家介紹的JS雙擊變input框批量修改內(nèi)容,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript函數(shù)Call、Apply原理實例解析
這篇文章主要介紹了JavaScript函數(shù)Call、Apply原理實例解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02聊聊那些使用前端Javascript實現(xiàn)的機器學(xué)習(xí)類庫
本文介紹了前端Javascript實現(xiàn)的機器學(xué)習(xí)類庫,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09TypeScript?mixin提升代碼復(fù)用性的方法和原理
在前端開發(fā)中,我們經(jīng)常需要在不同的組件或類之間共享功能代碼,Mixin提供了一種非常靈活的方式,可以讓我們在不破壞繼承關(guān)系的前提下,將功能代碼復(fù)用到多個對象中,文章通過代碼示例介紹mixin提升代碼復(fù)用性的方法和好處,需要的朋友可以參考下2023-06-06html5+canvas實現(xiàn)支持觸屏的簽名插件教程
jq-signature.js是一個幫助你創(chuàng)建簽名的jQuery插件,允許你的用戶使用鼠標,手指或者鉛筆生成簽名。下面這篇文章主要給大家介紹了利用html5+canvas實現(xiàn)支持觸屏的簽名插件的相關(guān)資料,需要的朋友可以參考下。2017-05-05Webpack學(xué)習(xí)之動態(tài)import原理及源碼分析
這篇文章主要為大家介紹了Webpack學(xué)習(xí)之動態(tài)import原理及源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04微信小程序?qū)W習(xí)筆記之表單提交與PHP后臺數(shù)據(jù)交互處理圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之表單提交與PHP后臺數(shù)據(jù)交互處理,結(jié)合實例形式詳細分析了微信小程序前臺數(shù)據(jù)form表單提交及后臺使用php進行處理相關(guān)操作技巧,并配以圖文形式詳細說明,需要的朋友可以參考下2019-03-03