JavaScript练习-列表添加删除上下移动

最新推荐文章于 2024-02-16 21:44:50 发布

雪酒呀

最新推荐文章于 2024-02-16 21:44:50 发布

阅读量515

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript习题文章标签：列表 js javascript css

本文链接：https://blog.youkuaiyun.com/Willow_Spring/article/details/117969600

javaScript习题专栏收录该内容

10 篇文章

订阅专栏

这个博客展示了如何使用HTML、CSS和JavaScript实现一个交互式的列表管理功能，包括添加、上移、下移和删除列表项。用户可以方便地操作列表，动态调整项目顺序，并通过确认对话框确保删除操作的安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.min.js"></script>
    <style>
        body {
            background: #ddd;
            text-align: center
        }
        
        .list {
            display: inline-block;
            margin-top: 20px;
            padding: 40px;
            border-radius: 8px;
            background: #fff;
            color: #333;
            text-align: left;
            font-size: 13px
        }
        
        .list-ul {
            list-style: none;
            margin: 0;
            padding: 0
        }
        
        .list-option {
            padding: 6px 0;
        }
        
        .list-input {
            width: 300px;
            border: 1px solid #ccc;
            padding: 4px;
            font-size: 14px;
            color: #333
        }
        
        .list-input:hover {
            background: #effaff
        }
        
        .list-btn span {
            color: #0065A0;
            ;
            cursor: pointer
        }
        
        .list-btn span:hover {
            text-decoration: underline
        }
        
        .list-btn b {
            text-align: center;
            background-color: #D6EDFF;
            border-radius: 6px;
            width: 20px;
            height: 20px;
            display: inline-block;
            margin: 0 2px;
            cursor: pointer;
            color: #238FCE;
            border: 1px solid #B3DBF8;
            float: left
        }
        
        .list-bottom {
            margin-top: 5px
        }
        
        .list-add-show {
            color: #f60;
            cursor: pointer
        }
        
        .list-add-show:before {
            position: relative;
            top: 1px;
            margin-right: 5px;
            content: "+";
            font-weight: 700;
            font-size: 16px;
            font-family: arial
        }
        
        .list-add-show span:hover {
            text-decoration: underline
        }
        
        .list-add-area {
            margin-top: 5px
        }
        
        .list-add-add {
            cursor: pointer;
            margin-left: 5px
        }
        
        .list-add-cancel {
            cursor: pointer;
            margin-left: 4px
        }
        
        .list-add-input {
            width: 180px;
            border: 1px solid #ccc;
            padding: 4px;
            font-size: 14px;
            color: #333
        }
        
        .list-add-input:hover {
            background: #effaff
        }
        
        .list-tmp {
            display: none
        }
        
        .list-hide {
            display: none
        }
    </style>
</head>

<body>
    <form>
        <div class="list">
            <!-- 列表结构 -->
            <ul class="list-ul">
                <li class="list-option">
                    <input class="list-input" type="text" value="PHP" name="list[]">
                    <span class="list-btn">
                <span class="list-up">[上移]</span>
                    <span class="list-down">[下移]</span>
                    <span class="list-del">[删除]</span>
                    </span>
                </li>
                <li class="list-option">
                    <input class="list-input" type="text" value="JavaScript" name="list[]">
                    <span class="list-btn">
                <span class="list-up">[上移]</span>
                    <span class="list-down">[下移]</span>
                    <span class="list-del">[删除]</span>
                    </span>
                </li>
            </ul>
            <!-- 添加项目 -->
            <div class="list-bottom">
                <span class="list-add-show"><span>添加项目</span></span>
                <div class="list-add-area list-hide">
                    添加到列表：
                    <input class="list-add-input" type="text" name="list[]">
                    <input class="list-add-add" type="button" value="添加">
                    <input class="list-add-cancel" type="button" value="取消">
                </div>
            </div>
        </div>
    </form>
    <script>
        $(function() {
            //点击添加项目去除列表隐藏样式
            $(".list-bottom .list-add-show").on('click', x => {
                    $(".list-add-area").removeClass("list-hide");
                })
                // 点击取消添加隐藏样式
            $(".list-add-cancel").on('click', () => {
                    $(".list-add-area").addClass("list-hide");
                })
                // 点击添加添加条目
            $(".list-add-add").click(function() {
                    let $li = $('<li class="list-option">  <input class="list-input" type="text" value="" name="list[]"><span class="list-btn"> <span class="list-up">[上移]</span> <span class="list-down">[下移]</span>    <span class="list-del">[删除]</span> </span>  </li>')
                    $(".list .list-ul").append($li)
                    $("input.list-input:last").val($("input.list-add-input").val())
                })
                // 上移
            $(".list-ul").on('click', ".list-up", function() {

                    //判断是否是第一个，最后一步做
                    let s = document.querySelectorAll(".list-option");
                    // console.log(s[0] == this.parent.parent);
                    console.log(s[0] == this.parentNode.parentNode);
                    if (s[0] == this.parentNode.parentNode) {
                        alert("已经是第一个了")
                    }

                    let li = $(this).parents('li');
                    // console.log(li);
                    li.prev().before(li)

                })
                //下移
            $(".list-ul").on("click", ".list-down", function() {
                    let s = document.querySelectorAll(".list-option");
                    let x = s.length - 1;
                    if (s[x] == this.parentNode.parentNode) {
                        alert('已经是最后一个了')
                    }
                    let li = $(this).parents('li')
                    li.next().after(li)
                    console.log(1);
                })
                //删除
            $(".list-ul").on("click", ".list-del", function() {
                if (confirm("确定要删除？"))
                    $(this).parent().parent().remove()
            })
        })
    </script>
</body>

</html>