JS雙擊變input框批量修改內(nèi)容
更新時(shí)間：2016年12月12日 14:04:54 作者：vancyf
這篇文章主要介紹了JS雙擊變input框批量修改內(nèi)容的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
雙擊空白或者文字變成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對(duì)象綁定鼠標(biāo)移開事件
newobj.onblur = function(){
// 判斷是否滿足發(fā)送ajax的條件
if(this.value != oldhtml){
element.innerHTML = this.value;
var value = this.value;
// alert(value);
//發(fā)送ajax請(qǐng)求
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)容，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript函數(shù)Call、Apply原理實(shí)例解析
這篇文章主要介紹了JavaScript函數(shù)Call、Apply原理實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
聊聊那些使用前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類庫
本文介紹了前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類庫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
在JS中如何調(diào)用JSP中的變量，具體該怎么實(shí)現(xiàn)？下面有個(gè)不錯(cuò)的示例，需要的朋友可以了解下2014-01-01
js動(dòng)態(tài)修改整個(gè)頁面樣式達(dá)到換膚效果
這篇文章主要介紹了通過js動(dòng)態(tài)修改整個(gè)頁面樣式達(dá)到換膚效果,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了javascript cookie的基本操作的相關(guān)資料,這里對(duì)Cookie的操作進(jìn)行了詳細(xì)介紹包括獲取，新建，設(shè)置有效期，添加和刪除等，需要的朋友可以參考下2017-07-07
TypeScript?mixin提升代碼復(fù)用性的方法和原理
在前端開發(fā)中，我們經(jīng)常需要在不同的組件或類之間共享功能代碼，Mixin提供了一種非常靈活的方式，可以讓我們?cè)诓黄茐睦^承關(guān)系的前提下，將功能代碼復(fù)用到多個(gè)對(duì)象中，文章通過代碼示例介紹mixin提升代碼復(fù)用性的方法和好處,需要的朋友可以參考下2023-06-06
html5+canvas實(shí)現(xiàn)支持觸屏的簽名插件教程
jq-signature.js是一個(gè)幫助你創(chuàng)建簽名的jQuery插件，允許你的用戶使用鼠標(biāo)，手指或者鉛筆生成簽名。下面這篇文章主要給大家介紹了利用html5+canvas實(shí)現(xiàn)支持觸屏的簽名插件的相關(guān)資料，需要的朋友可以參考下。2017-05-05
Webpack學(xué)習(xí)之動(dòng)態(tài)import原理及源碼分析
這篇文章主要為大家介紹了Webpack學(xué)習(xí)之動(dòng)態(tài)import原理及源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了JS前端廣告攔截實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
微信小程序?qū)W習(xí)筆記之表單提交與PHP后臺(tái)數(shù)據(jù)交互處理圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之表單提交與PHP后臺(tái)數(shù)據(jù)交互處理,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序前臺(tái)數(shù)據(jù)form表單提交及后臺(tái)使用php進(jìn)行處理相關(guān)操作技巧,并配以圖文形式詳細(xì)說明,需要的朋友可以參考下2019-03-03