前端代码实现单击列表修改内容功能

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

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于成都企业网站定制,高端网页制作,对成都石雕等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业成都网站推广优化,H5建站,响应式网站。

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)");
}

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

效果演示：

点击文本后效果：

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

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