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

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

发布时间：2020-06-24 10:15:29

来源：亿速云

阅读：104

作者：Leah

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

HTML:

test.html

td {

border:solid 1px;

width:200px;

height:auto;

text-align:center;

}

test1	test2
test1	test2

JS:

test.jsvar 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)");

}

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

效果演示：

点击文本后效果：

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

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