hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

【WEB前端开辟】单击列表修正其内容(前端部份)怎么做(代码)

2019-11-27后端开发ki4网20°c
A+ A-

前端做假修正(只变动显现数据),现实变动数据(变动数据库)背景实行。

当前代码段为前端代码展现: (引荐进修:前端视频)

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 = '<input type="text" value="' + text + '" id="input"  οnchange="chane(this)"  οnblur="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)");
}

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

结果演示:

点击文本后结果:

鼠标失焦或许回车保留后结果:

以上就是单击列表修正其内容(前端部份)怎么做(代码)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
【WEB前端开辟】单击列表修正其内容(前端部份)怎么做(代码)

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>