单击列表修改其内容（前端部分）

最新推荐文章于 2022-03-09 20:33:14 发布

Aaronღ

最新推荐文章于 2022-03-09 20:33:14 发布

阅读量992

点赞数 5

分类专栏： Java 前端

本文链接：https://blog.csdn.net/weixin_41549393/article/details/103240366

版权

Java 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

前端做假修改（只更改显示数据），实际更改数据（更改数据库）后台执行。

当前代码段为前端代码展示：

HTML:

test.html

<!DOCTYPE html>

<html class="no-js">
<!--<![endif]-->
<head>
    <script src="js/test.js"></script>
<style>
    td {
        border:solid 1px;
        width:200px;
        height:auto;
        text-align:center;
    }

</style>
</head>
<body>
    <table>
        <tr>
            <td onclick="test(this)">test1</td>
            <td onclick="test(this)">test2</td>
        </tr>
        <tr>
            <td onclick="test(this)">test1</td>
            <td onclick="test(this)">test2</td>
        </tr>
    </table>
</body>
</html>

JS:

test.js

var firstValue = "";
var nowDom = "";//当前操作的td
//点击更改事件
function test(doms) {
    doms.removeAttribute("onclick");
    nowDom = doms;
    var text = doms.innerText;
    doms.innerHTML = '<input type="text" value="' + text + '" id="input"  onchange="chane(this)"  onblur="inputOnblur(this)"/>';
    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)");
}

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

效果演示：

点击文本后效果：

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

Aaronღ

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
单击列表修改其内容（前端部分）

前端做假修改（只更改显示数据），实际更改数据（更改数据库）后台执行。当前代码段为前端代码展示：HTML:test.html<!DOCTYPE html><html class="no-js"><head> <script src="js/test.js"></s...
复制链接

扫一扫