可编辑列表（json文件，可编辑，添加等）

左一.

于 2021-05-21 10:56:59 发布

阅读量278

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/c_players/article/details/116292262

版权

可编辑列表（json文件，可编辑，添加等）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <!-- 表单部分 -->
    <div id="tb">
    </div>
    <!-- 添加数据部分 -->
    <div id="add-input">
        <button id="btn-add" onclick="add()">添加</button>
    </div>
    <button id="btn-sure" onclick="btnok()">确认</button>
</body>
<script>
    // 引入类似Json文件
    var people= [
            {
   
                number: "学号",
                name: "姓名",
                chinese: "语文",
                english: "英语",
                math: "数学",
                allscore: "总分",
            },
            {
   
                number: "1101",
                name: "小王",
                chinese: 98,
                english: 91,
                math: 80,
                allscore: 269,
            },
            {
   
                number: "1102",
                name: "小曾",
                chinese: 88,
                english: 92,
                math: 87,
                allscore: 267,
            },
            {
   
                number: "1103",
                name: "小赵",
                chinese: 75,
                english: 86,
                math: 90,
                allscore: 251,
            },
            {
   
                number: "1104",
                name: "小周",
                chinese: 65,
                english: 83,
                math: 81,
                allscore: 229,
            },
        ];
    // 利用JSON.stringify 将js对象序列化（JSON字符串）
    let jsonobj=JSON.stringify(people);
    // localStorage特性，这个特性主要是用来作为本地存储
    // 将jsonobj存储到tab字段
    localStorage.setItem("tab",jsonobj);
    // 获取
    let obj=JSON.parse(localStorage.getItem("tab"