ul、ol列表的增删改实现，对比js和jquery

最新推荐文章于 2024-03-09 21:41:49 发布

木木狐工作室

最新推荐文章于 2024-03-09 21:41:49 发布

阅读量169

点赞数

分类专栏： WEB开发文章标签： javascript jquery 开发语言

本文链接：https://blog.csdn.net/baggio_ryu/article/details/133804542

版权

WEB开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在页面中放置一个ul或ol列表，实现对列表中li标签的高亮选中、添加到最后（append），添加到指定位置之前（before）、之后（after），删除选中的li标签，修改选中的li标签。

html部分不变：

    <style type="text/css">
        ol li {
            border: 1px solid #0094ff;
            font-family: 微软雅黑;
            font-size: 30px;
            width: 200px;
        }
    </style>
    <body>
        <input type="button" value="添加标签到最后" onclick="AddToEnd()">
        <input type="button" value="添加到选中标签之前" onclick="InsertToBefore()">
        <input type="button" value="添加到选中标签之后" onclick="InsertToAfter()">
        <input type="button" value="删除选中标签" onclick="Del()">
        <input type="button" value="修改选中标签" onclick="Edit()">
        <ol id="olList">
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ol>
    </body>

js代码实现：

<script type="text/javascript">

    var ulDom = getDomByID("olList");
    var domLis = getDomsByTagName("li");
    var selectedLi = undefined;
    for (var i = 0; i < domLis.length; i++)
    {
        domLis[i].onclick = highLight;
    }

    function MakeLi(liContent)
    {
        var newLi = document.createElement("li");
        newLi.innerHTML = liContent;
        newLi.onclick = highLight;
        return newLi;
    }

    function highLight()
    {
        var domLis = getDomsByTagName("li");
        for (var i = 0; i < domLis.length; i++)
        {
            domLis[i].style.backgroundColor = "white";
        }
        this.style.backgroundColor = "yellow";
        selectedLi = this;
    }

    function getInput()
    {
        var inputStr = prompt("请输入标签内容", "在此输入");
        if (inputStr != undefined && inputStr != "在此输入")
        {
            return inputStr.trim();
        }
        else return "";
    }

    function AddToEnd()
    {
        var inputStr = getInput();
        if (inputStr != "")
        {
            var newLi = MakeLi(inputStr);
            ulDom.appendChild(newLi);
        }
    }

    function InsertToBefore()
    {
        var inputStr = getInput();
        if (inputStr != ""&&selectedLi!=undefined)
        {
            var newLi = MakeLi(inputStr);
            ulDom.insertBefore(newLi,selectedLi);
        }
    }

    function Edit()
    {
        if (selectedLi != undefined)
        {
            var inputStr = getInput();
            if (inputStr != "" && inputStr != selectedLi.innerHTML)
            {
                selectedLi.innerHTML = inputStr;
            }
        }
    }

    function Del()
    {
        if (selectedLi != undefined)
        {
            ulDom.removeChild(selectedLi);
            selectedLi = undefined;
        }
    }
</script>

jquery代码实现，在修改时变为直接在原来的li标签内生成文本框，可以直接在该位置修改，修改结束文本框消除，文本框值保留在li标签。

    <script src="JS/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        var $liSelObj=undefined;//纪录当前选中的li标签
        var $inputObj = $("<input type='text' />");//定义一个初始编辑文本框
        var isReadyEdit = true;//当前是否可以编辑

        //等同于$(document).ready(function () { })
        $(function () {
            //为所有li标签绑定点击高亮事件,要注意js里是onclick=方法名，jquery里是click(方法名)，不要搞混
            $("li").click(selHighLight);
        })

        //li标签的点击高亮方法
        function selHighLight()
        {
            //还原所有li标签背景色
            $("li").css("background-color", "white");
            //设置当前li标签的背景色为黄色
            $(this).css("background-color", "yellow");
            //纪录当前选中的li标签
            $liSelObj = $(this);
        }

        //创建一个新的li标签
        function makeLi()
        {
            var inputStr = prompt("请输入标签内容", "这里输入");
            //判断是否输入
            if (inputStr != undefined && inputStr.trim() != "" && inputStr.trim() != "这里输入") {
                //创建一个li标签
                $liObj = $("<li>" + inputStr + "</li>");
                //为创建的li标签绑定点击高亮选中事件
                $liObj.click(selHighLight);
                return $liObj;
            }
            else return undefined;//用于判断是否创建了li标签
        }

        //创建一个li标签，添加到最后
        function AddToEnd()
        {
            $newLiObj = makeLi();
            if ($newLiObj != undefined)
            {
                $("#olList").append($newLiObj);
            }
        }

        //在选中li标签之前插入一个新li标签
        function InsertToBefore()
        {
            //判断当前是否有标签选中
            if ($liSelObj) {
                $newLiObj = makeLi();
                if ($newLiObj != undefined) {
                    $newLiObj.insertBefore($liSelObj);
                }
            }
            else alert("请先选中一个li标签");
        }

        //在选中li标签之后插入一个新li标签
        function InsertToAfter() {
            //判断当前是否有标签选中
            if ($liSelObj) {
                $newLiObj = makeLi();
                if ($newLiObj != undefined) {
                    $newLiObj.insertAfter($liSelObj);
                }
            }
            else alert("请先选中一个li标签");
        }

        //删除选中li标签
        function Del()
        {
            //判断当前是否有标签选中
            if ($liSelObj) {
                $liSelObj.remove();
                $liSelObj = undefined;
            }
            else alert("请先选中一个li标签");
        }

        //修改选中li标签
        function Edit()
        {
            //判断当前是否有标签选中
            if ($liSelObj) {

                //判断当前是否可以编辑
                if (isReadyEdit)
                {
                    //获取当前选中li标签的文本，放在input控件中
                    var strCurLiText = $liSelObj.text();
                    $inputObj.val(strCurLiText);
                    //将li标签内的文本清除，替换为input标签
                    $liSelObj.html($inputObj);
                    //为文本框添加失去焦点事件
                    $inputObj.blur(loseFocus);
                    //文本框获得焦点，要先获得焦点，才能触发失去焦点事件
                    $inputObj.focus();
                    //在编辑状态中，不能再新建文本框
                    isReadyEdit = false;
                }
            }
            else alert("请先选中一个li标签");
        }


        //编辑文本框失去焦点事件
        function loseFocus() {
            //获取自己的文本值
            var oldStr = $(this).val();
            //将文本值,设置到自己的父元素中
            $(this).parent().html(oldStr);
            //重置为可以编辑
            isReadyEdit = true;
        }

    </script>

木木狐工作室

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ul、ol列表的增删改实现，对比js和jquery

在页面中放置一个ul或ol列表，实现对列表中li标签的高亮选中、添加到最后（append），添加到指定位置之前（before）、之后（after），删除选中的li标签，修改选中的li标签。jquery代码实现，在修改时变为直接在原来的li标签内生成文本框，可以直接在该位置修改，修改结束文本框消除，文本框值保留在li标签。
复制链接

扫一扫