[数据驱动Dom]利用jquery实现输入数据的长期保存并渲染到页面(关闭浏览器数据也会保存)

最新推荐文章于 2023-09-07 11:25:11 发布

莫尔道嘎老范

最新推荐文章于 2023-09-07 11:25:11 发布

阅读量456

点赞数

文章标签： javascript css jquery html

本文链接：https://blog.csdn.net/weixin_44134588/article/details/107946448

版权

核心点

利用数组存储数据,将数组转化为字符串存到localStorage 它的基础操作在这里:https://blog.csdn.net/weixin_44134588/article/details/107803511

基础界面(实现功能为主,不要在乎外观):
在这里插入图片描述
用户输入之后就会渲染到浏览器中;

用户可以手动执行删除和上下移动操作;
上代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table,
        tr,
        th,
        td {
            border: 1px solid #000;
            text-align: center;
        }

        table {
            width: 600px;
        }

        i {
            font-style: normal;
            color: red;
        }

        i,
        span {
            cursor: pointer;
        }

        span {
            color: green;
        }
    </style>
</head>

<body>
    姓名: <input type="text" id="in1">
    性别: <input type="text" id="in2">
    年龄 <input type="text" id="in3">
    <button id="btn">提交</button>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        $(function () {
            let arr = []; //声明一个数组
            $("#btn").on("click", function () {
                if ($("#in1").val() == '' || $("#in2").val() == '' || $("#in3").val() == '') {
                    alert("请补充完整信息");
                    return;
                } else {
                    arr.push({
                        uname: $("#in1").val(),
                        sex: $("#in2").val(),
                        age: $("#in3").val(),
                    })
                }
                saveInfo();
                loadView();
                $("#in1").val('');
                $("#in2").val('');
                $("#in3").val('')
            })
            //判断是否有数据
            if (localStorage.getItem("information")) {
                arr = JSON.parse(localStorage.getItem("information"));
                loadView(); //
            }
            //删除操作
            $("tbody").on("click", "a", function () {
                let id = $(this).attr("id");
                console.log(id);
                arr.splice(id, 1); //删除对应的数组元素 
                loadView();
                saveInfo();
            })
            //向上移动操作
            $("tbody").on("click", "i", function () {
                // let id = $(this).siblings('a').attr("id");
                let id = $(this).parents('tr').attr("id");
                let xulie = {};
                if (id >= 1) {
                    console.log(arr[id]);
                    xulie = arr[id - 1];
                    arr[id - 1] = arr[id];
                    arr[id] = xulie;
                    saveInfo();
                    loadView();
                }
                console.log(arr);
            })
            //向下移动
            $("tbody").on("click", "span", function () {
                // let id = parseFloat($(this).siblings('a').attr("id"));
                let id = $(this).parents('tr').attr("id") - 0;
                let xulie = {};
                if (id < arr.length - 1) {
                    xulie = arr[id + 1];
                    arr[id + 1] = arr[id];
                    arr[id] = xulie;
                    saveInfo();
                    loadView();
                }
                console.log(arr);
            })
            //存储到本地
            function saveInfo() {
                localStorage.setItem("information", JSON.stringify(arr));
            }
            //渲染到页面
            function loadView() {
                $("tbody").empty();
                $.each(arr, function (index, info) {
                    let tr =
                        `<tr id=${index}><td>${info.uname}</td> <td>${info.sex}</td><td>${info.age}</td> <td><a href="javascript:;" >删除</a> <i>上移</i> <span>下移</span></td></tr>`
                    $("tbody").append(tr);
                })
            }
        })
    </script>
</body>

</html>