前端代码实现单击列表修改内容功能-创新互联

这期内容当中小编将会给大家带来有关前端代码实现单击列表修改内容功能的方法，以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

HTML:

test.html

 



    



    

        

            
test1
            
test2
        
        

            
test1
            
test2
        
    

JS:

test.js

var firstValue = "";
var nowDom = "";//当前操作的td
//点击更改事件
function test(doms) {
    doms.removeAttribute("onclick");
    nowDom = doms;
    var text = doms.innerText;
    doms.innerHTML = '';
    firstValue = text;
    document.getElementById("input").focus();
}
 
//文本框更改事件
function chane(doms) {
    var text = doms.value;
    if (text != firstValue) {
        //提交后台更改数据库
 
        //前端操作
        nowDom.innerHTML = ""+text;
        nowDom.setAttribute("onclick", "test(this)");
    }
}
 
//文本框失焦事件
function inputOnblur(doms) {
    var text = doms.value;
    if (text != firstValue) {
        //提交后台更改数据库
    }
    nowDom.innerHTML = "" + text;
    nowDom.setAttribute("onclick", "test(this)");
}

原理就是点击时将文本改成输入框即可！

效果演示：

点击文本后效果：

鼠标失焦或者回车保存后效果：

上述就是小编为大家分享的前端代码实现单击列表修改内容功能的方法了，如果您也有类似的疑惑，不妨参照上述方法进行尝试。如果想了解更多相关内容，请关注创新互联网站制作公司行业资讯。