编辑保存取消表单js

最新推荐文章于 2023-04-09 18:20:15 发布

原创最新推荐文章于 2023-04-09 18:20:15 发布 · 510 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一个编辑表单的功能。在初始状态下，输入框无边框，点击编辑按钮后，内容可修改，同时出现取消和保存按钮。点击取消或保存将执行相应操作。示例代码可供直接复制运行。

想法： input 开始是设置没有边框；点编辑可以修改内容，取消、保存开始是隐藏的，开始编辑的时候，编辑隐藏，取消、保存显示，点击取消、保存可以进行相应的操作。
我比较习惯上传可以直接复制粘贴运行的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    padding: 0;
    margin: 0;
}
ul{
    margin: 30px ;
}
input{
       /* outline: none; */
       border: none;
}
li a:nth-child(3),li a:nth-child(4){
display: none;
}
    </style>
</head>

<body>
    <ul>
        <li>
            <input type="text" value="JavaScript权威指南" >
            <!-- 可以不加href属性，要是加的话就一定要写# 不然点击产生的效果会显示一瞬间 -->
            <a href="#">编辑</a>
            <a href="#">保存</a>
            <a href="#">取消</a>

        </li>
        <li>
            <input type="text" value="JavaScript权威指南" >
            <!-- 可以不加href属性，要是加的话就一定要写# 不然点击产生的效果会显示一瞬间 -->
            <a href="#">编辑</a>
            <a href="#">保存</a>
            <a href="#">取消</a>

        </li>
        <li>
            <input type="text" value="JavaScript权威指南" >
            <!-- 可以不加href属性，要是加的话就一定要写# 不然点击产生的效果会显示一瞬间 -->
            <a href="#">编辑</a>
            <a href="#">保存</a>
            <a href="#">取消</a>

        </li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {
          
            getResult(lis[i]);
        }
        function getResult(father) {
            //因为你是要将a input都循环三遍，在函数中又要直接用input第一个下标的值以及a的前三个所以是不能在外面写的
            var a = father.getElementsByTagName('a');
            var input = father.getElementsByTagName('input')[0];
            //编辑
            a[0].onclick = function () {
                input.style.border = '1px solid black';
                this.style.display = 'none';
                a[1].style.display = 'inline';
                a[2].style.display = 'inline';
            }
            //保存
            a[1].onclick = function () {

                input.innerText = input.innerText + '';
                input.style.border = 'none';
                a[0].style.display = 'inline';
                this.style.display = 'none';
                a[2].style.display = 'none';

            }
            // 取消
            a[2].onclick = function () {
                input.value = 'JavaScript权威指南';
                input.style.border = 'none';
                a[0].style.display = 'inline';
                a[1].style.display = 'none';
                this.style.display = 'none';

            }

        }  
     
    </script>
</body>

</html>