每天一个效果 ：（13.1）学员信息表

今天我们来做一个学生表，表单，输入数据，点击确定，会被整理到一个表格当中，就是这样的一个效果。

话不多说，我们直接看看html和css代码

    <div id="app">
        <fieldset>
            <legend>学生录入系统</legend>
            <p>
                <span>姓名:</span>
                <input type="text" name="username" class="username">
            </p>
            <p>
                <span>年龄:</span>
                <input type="text" name="age" class="age">
            </p>
            <p>
                <span>性别:</span>
                <select name="sex" id="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </p>
            <p>
                <span>手机:</span>
                <input type="text" name="phone" class="phone">
            </p>
            <p>
                <button id="but">确认提交</button>
            </p>
        </fieldset>

        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>手机</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody class="tbody">
                <tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>男</td>
                    <td>151111111</td>
                    <td>删除</td>
                </tr>
            </tbody>
        </table>
    </div>

    <style>
        table {
            width: 628px;
            margin: 0 auto;
            border: 1px solid #ccc;
            text-align: center;
            border-collapse: collapse
        }

        th {
            background-color: skyblue;
        }

        th,
        td {
            border-left: 1px solid #ccc;

        }

        fieldset {
            width: 600px;
            margin: 0 auto;
        }

        input {
            height: 20px;
        }
    </style>

我们来看一下效果

 我们来梳理一下js的逻辑:

       1.添加信息并展示

        2.删除操作

        先把数据push到一个数组当中，然后对数组进行遍历（对tr的一个循环，拼接之后，赋值给tbodt的innerHTML）

我们今天先获取到输入的元素。

我们来看一下js代码

    <script>
        //逻辑：1.添加信息并展示
        // 2.删除操作
        //先把数据push到一个数组当中，然后对数组进行遍历（对tr的一个循环，拼接之后，赋值给tbodt的innerHTML）
        let sex = document.getElementById('sex');
        let but = document.getElementById('but');
        let input = document.getElementsByTagName('input');
        //模拟一个数据
        // let stus = [{name:'李四',age:19,sex:'男',phone:1921321321},{name:'李四',age:19,sex:'男',phone:1921321321}]
        let stus = [];
        //1.提交 拼接一个对象，作为数组的元素 
        but.onclick = function(){
            let obj = {name:input[0].value,age:input[1].value,sex:sex.value,phone:input[2].value};
            stus.push(obj);
            console.log(stus);
        }
    </script>

我们来看一下效果

今天的效果就坐到这里啦，明天更新下一期吧~