ホームページ > 記事 > ウェブフロントエンド > リストをクリックしてその内容を変更する方法 (フロントエンド部分) (コード)

リストをクリックしてその内容を変更する方法 (フロントエンド部分) (コード)

(*-*)浩オリジナル: 2019-11-26 12:00:592666ブラウズ

# フロントエンドは偽の変更 (表示データのみを変更) を行い、実際のデータ変更 (データベースへの変更) はバックグラウンドで実行されます。

#現在のコードセグメントはフロントエンドコード表示です: (推奨学習: フロントエンドビデオ)

# #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>

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

原理は、クリックするとテキストが入力ボックスに変わることです。

効果のデモ:

テキストをクリックした後の効果:

リストをクリックしてその内容を変更する方法 (フロントエンド部分) (コード)

マウスのフォーカスが外れたか、Enter キーを押して保存した後の効果:

以上がリストをクリックしてその内容を変更する方法 (フロントエンド部分) (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：WEBフロントエンドをわかりやすく解説次の記事：WEBフロントエンドをわかりやすく解説

続きを見る