So klicken Sie auf eine Liste, um deren Inhalt zu ändern (Front-End-Teil) (Code)

(*-*)浩
Freigeben: 2019-11-26 12:01:11
Original
2722 Leute haben es durchsucht

So klicken Sie auf eine Liste, um deren Inhalt zu ändern (Front-End-Teil) (Code)

Das Frontend nimmt gefälschte Änderungen vor (ändert nur die Anzeigedaten), und die tatsächlichen Datenänderungen (Änderungen an der Datenbank) werden im Hintergrund ausgeführt.

Das aktuelle Codesegment ist die Front-End-Codeanzeige: (Empfohlenes Lernen: 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>
Nach dem Login kopieren

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)");
}
Nach dem Login kopieren

Das Prinzip besteht darin, den Text beim Anklicken in ein Eingabefeld zu verwandeln!

Effektdemonstration:

Der Effekt nach dem Klicken auf den Text:

So klicken Sie auf eine Liste, um deren Inhalt zu ändern (Front-End-Teil) (Code)

Der Effekt, nachdem die Maus unscharf ist oder Sie zum Speichern die Eingabetaste drücken:

So klicken Sie auf eine Liste, um deren Inhalt zu ändern (Front-End-Teil) (Code)

Das obige ist der detaillierte Inhalt vonSo klicken Sie auf eine Liste, um deren Inhalt zu ändern (Front-End-Teil) (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage