原生js编写学生信息管理系统——添加学生信息

页面样式

---

html

---

    <header>学生信息管理</header>
    <table id="tablebox" class="tablebox">
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
        </thead>

    </table>
    <form class="message-input">
        <input type="text" id="namebox" placeholder="请输入姓名" name="namebox">
        <input type="text" id="agebox" placeholder="请输入年龄" name="agebox">
        <select id="selectbox" name="select">
            <option selected="selected">请选择</option>
            <option >软件一班</option>
            <option >软件二班</option>
            <option>软件三班</option>
        </select>
        <!-- <input id="submit" type="submit"></input> -->
        <button type="button" id="submit">提交</button>
    </form>

---

css

---

    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    header {
        position: fixed;
        top: 0;
        text-align: center;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        background-color: rgba(180, 66, 37, 0.916);
    }
    
    #tablebox {
        margin-top: 70px;
        border: 1px solid #333;
        width: 800px;
        /* 去除单元格间隙 */
        border-collapse: collapse;
    }
    
    #tablebox thead th,
    #tablebox tr td {
        border: 1px solid #333;
        text-align: center;
        padding: 10px;
    }
    
    .message-input {
        margin-top: 70px;
    }
    
    #namebox,
    #agebox {
        height: 30px;
        border-radius: 4px;
        border: 1px solid rgb(143, 140, 140);
        text-align: center;
        outline-color: rgb(209, 75, 75);
    }
    
    .message-input select {
        height: 30px;
        border: 1px solid rgb(143, 140, 140);
        border-radius: 4px;
        cursor: pointer;
        color: gray;
        outline-color: rgb(209, 75, 75);
    }
    
    .message-input select option {
        color: #333;
    }
    
    .message-input #submit {
        width: 50px;
        height: 30px;
        border: none;
        border-radius: 4px;
        color: #fff;
        background-color: rgba(180, 66, 37, 0.916);
        cursor: pointer;
    }

---

js

---

<script>
    var tableboxEle = document.getElementsByClassName("tablebox")[0];
    var nameboxEle = document.getElementById("namebox");
    var ageboxEle = document.getElementById("agebox");
    var selectboxEle = document.getElementById("selectbox");
    var submitEle = document.getElementById("submit");

    //测试获取selectbox里面的内容
    // console.log(selectboxEle.text);
    // console.log(selectboxEle[2]);

    //初始化messageList
    var messageList = [];
    var message = localStorage.getItem("messageList");
    messageList = message ? JSON.parse(localStorage.getItem("messageList")) : [];

    //for循环在页面输出
    for (var i = 0; i < messageList.length; i++) {
        tableboxEle.innerHTML += addMessageList(messageList[i].name, messageList[i].age, messageList[i].class);
    }

    // 提交点击事件
    submitEle.addEventListener('click', function() {
        getValue();

    })

    // 获取form表单里面输入的姓名和年龄以及选择的班级
    function getValue() {


        // 获取输入的姓名
        var nameValue = nameboxEle.value;
        if (!nameValue) {
            alert("请输入姓名");
        }
        console.log(nameValue);


        // 获取输入的年龄
        var ageValue = ageboxEle.value;
        if (!ageValue) {
            alert("请输入年龄");
        }
        console.log(ageValue);


        // 获取选择的班级
        //selectedIndex属性可设置或返回下拉列表被选选项的索引号
        var index = selectboxEle.selectedIndex;
        if (index == 0) {
            alert("请选择班级");
        }
        var classValue = selectboxEle[index].text;
        console.log(classValue);


        //清空value
        nameboxEle.value = "";
        ageboxEle.value = "";
        selectboxEle.text = selectboxEle[0].text;


        //调用方法push进messaList数组中
        // addMessage(nameValue, ageValue, classValue);
        messageList.push({
            name: nameValue,
            age: ageValue,
            class: classValue
        })


        //调用方法存到表格格式中
        var list = addMessageList(nameValue, ageValue, classValue);
        console.log(list);


        //将messaList数组存储到本地
        localStorage.setItem("messageList", JSON.stringify(messageList));


        //for循环将表格格式的内容添加到页面中
        tableboxEle.innerHTML += list;


    }

    console.log(messageList);


    // 将相关信息添加到messageList中
    // function addMessage(nameValue, ageValue, classValue) {
    //     messageList.push({
    //             name: nameValue,
    //             age: ageValue,
    //             class: classValue
    //         })
    //         //将messaList数组存储到本地
    //     localStorage.setItem("messageList", JSON.stringify(messageList));
    // }

    //定义样式
    function addMessageList(nameValue, ageValue, classValue) {
        return `<tr>
            <td>${nameValue}</td>
            <td>${ageValue}</td>
            <td>${classValue}</td>
        </tr>`
    }
</script>

---

知识总结：

---

一： submit属于提交按钮，不需要绑定监听事件，button需要手动添加事件，作用范围广

        （出现的问题：运用submit导致点击事件里面的方法都没办法实现）

---

二：有关获取下拉列表select选择的option的内容

        <select id="select">

            <option></option>

            <option></option>

            <option></option>

        </select>

        1.获取select对象

            var a=document.getElementById("select");

        2.获取选择的option的索引（selectedIndex属性可设置或返回下拉列表被选选项的索引号）

            var index=a.selectedIndex;

        3.获取被选中的option的text或者value

            var text=a[index].text;

---

三、多个数据输入需要用<form></form>表单域将所有input表单包裹起来使彼此之间建立关联，可以通过设置id值与统一文档中的<form>建立关联，或者与任何存在的祖先<form>元素关联。

---

四、去除单元格间隙

    border-collapse: collapse;

---

五、初始化列表的值为本地储存的列表，列表为空时会报错

    var List = [];//初始化列表为空

    var message = localStorage.getItem("messageList");//获取本地存储的列表

    List = message ? JSON.parse(localStorage.getItem("messageList")) : [];//判断列表是否为空并初始化列表数值

---

六、思路：

        1.获得所有所需对象

        2.定义列表存储所需表单输入的内容

             var messageList=({

                name: "",

                age: "",

                class: ""

            })

        3.获取表单输入的内容

            nameValue/ageValue/classValue

        4.清除表单输入的内容

        （注：不要将表单内容和获取的表单内容混淆）

        5.将所获值存储到列表中

            list.push({

                name: nameValue,

                age: ageValue,

                class: classValue

            })

        （注：push()方法中的格式应和列表格式保持一致）

        6.撰写一个方法，用来将数值按要求样式在页面输出,将前面所获得的数值运用字符串`${Str}`模板替换

            function addMessageList(nameValue, ageValue, classValue) {

                return `<tr>

                    <td>${nameValue}</td>

                    <td>${ageValue}</td>

                    <td>${classValue}</td>

                </tr>`

            }

        7.调用样式方法获得样式字符串

            var list=addMessageList(nameValue, ageValue, classValue);

        8.将列表存储到本地

            localStorage.setItem("list", JSON.stringify(list));

        （注：此处要用到 JSON.stringift()将值转化为String类型，因为localStorage.setItem("String",String))

        9.将7.中调用样式方法所获得的样式字符串在页面中渲染出来

            tableboxEle.innerHTML += list;

        （注：只有class类型的对象才能使用innerHTML）

        10.定义点击事件方法

            （1）input控件绑定onclick事件，定义onclick事件的方法，将以上除6以外的内容调用在该方法中

                <input type="button" οnclick="getIndex()" >

                getIndex(){

                        相关事件

                }

            （2）点击触发click或者change事件，运用addEventListener() 方法向指定元素添加事件句柄。

                <button type="button" id="submit">提交</button>

                var submitEle=document.getElementById("submit");

                submitEle.addEventListener('click', function() {

                   相关事件

                })

        11.初始化列表（将列表内容替换成本地存储的列表数据）

                var messageList = [];

                var message = localStorage.getItem("messageList");

                messageList = message ? JSON.parse(localStorage.getItem("messageList")) : [];

        （注：localStorage.getItem("messageList")所获得的值为字符串，用JSON.parse()将其转换为数组）

        12.for循环遍历列表

            因为我们定义的列表格式并不是我们可以在页面上渲染出来的样式，所以需要将列表里的内容通过调用到步骤6中的内容中按照所需样式添加到列表中

            for (var i = 0; i < messageList.length; i++) {

                tableboxEle.innerHTML += addMessageList(messageList[i].name, messageList[i].age, messageList[i].class);

            }

---

七、问题

2.下拉列表如何实现提交后返回原状

3.autocomplete=“off”在css中如何体现