How to click a list to modify its content (front-end part) (code)-Front-end Q&A-php.cn

How to click a list to modify its content (front-end part) (code)

(*-*)浩

Release： 2019-11-26 12:01:11

Original

2749 people have browsed it

How to click a list to modify its content (front-end part) (code)

# The front end makes fake modifications (only changes the display data), and the actual data changes (changes to the database) are executed in the background.

The current code segment is the front-end code display: (Recommended learning: Front-end video)

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 οnclick="test(this)">test1</td>
            <td οnclick="test(this)">test2</td>
        </tr>
        <tr>
            <td οnclick="test(this)">test1</td>
            <td οnclick="test(this)">test2</td>
        </tr>
    </table>
</body>
</html>

Copy after login

JS:

test.js

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

Copy after login

The principle is to change the text into an input box when clicked!

Effect demonstration:

The effect after clicking on the text:

How to click a list to modify its content (front-end part) (code)

The effect after the mouse is out of focus or you press enter to save:

How to click a list to modify its content (front-end part) (code)

The above is the detailed content of How to click a list to modify its content (front-end part) (code). For more information, please follow other related articles on the PHP Chinese website!