原生JavaScript实现todolist操作

todoList 案例

我们通过一个案例，了解一下 push() 和 spile() 方法的使用，他们分别是压入一个元素 和 删除某个(数组)元素。

1-1、通过html 和 css 样式的局部完成我们页面的搭建：
使用常规html进行布局，数据的添加采取 fieldse t布局或者使用 form 来局部均可，我这里采取 fieldset 局部搭建完成。

html元素：

<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>admin</td>
                    <td>18</td>
                    <td>男</td>
                    <td>13488888888</td>
                    <td>删除</td>
                </tr> 
            </tbody>
         </table>

css样式：

<style>
        table,
        tr,
        th,
        td {
            border: 1px solid #ccc;
        }
        
        tr {
            height: 40px;
        }
        
        table {
            border-collapse: collapse;
            width: 630px;
            text-align: center;
            margin: 20px auto;
        }
        
        thead {
            background-color: skyblue;
        }
        
        fieldset {
            width: 600px;
            margin: 0 auto;
        }
        
        input {
            height: 20px;
        }
    </style>

1-2、我们执行的步骤和逻辑思想

功能的制定：
1、添加信息并展示
2、删除操作
逻辑思想：
1、我们先把在fieldset中input的数据push到我们的数组 stus 当中；
2、声明一个提交事件；
----2-1、对tr的循环；
----2-2、将压入的数组进行拼接；
----2-3、最后添加给tbody的innerHTML；
3、声明一个删除事件
----3-1、删除数组的一条数据spile();
----3-2、删除DOM数组当中的信息removeChild();

1-3 代码解析
1、首先我们先获取我们的所需要使用的元素

let sex = document.getElementById('sex');
let but = document.getElementById('but');
let input = document.getElementsByTagName('input');
let tbody = document.getElementsByTagName('tbody')[0];

2、我们可以预想一下获取数据的格式是怎么样的，模拟一个假数据先，并且声明一个空数组用于存储我们的等会存放的数据当中

    let stus = [];
// let stus = [{
            // name: '李四',
           // age: 19;sex: '男',
          //  phone: 13488888888
        // }];

3、声明一个提交事件，并且使用forEach循环拼接input中的数据，再将其添加到 tbody 当中。

	// 提交事件  拼接一个对象，作为数组的元素
	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);
                // 2、对数组进行一个遍历
                let tr = '';
               //  使用forEach循环
                stus.forEach((item, index) => {
                // 将input中的数据拼接起来
                    tr += " <tr class='newTr'>" +
                        "<td>" + item.name + "</td>" +
                        "<td>" + item.age + "</td>" +
                        "<td>" + item.sex + "</td>" +
                        "<td>" + item.phone + "</td>" +
                        "<td οnclick='del(" + index + ")'> 删除 </td>" +
                        "</tr>";
                });
                // 将循环后的数据拼接后赋值到 tbody 当中
                tbody.innerHTML = tr;
            }

4、声明一个删除操作，这里只有是通过silpe()方法删除数组中的元素 和 removeChild() 删除该信息的tr；这里说明一下，spile()是删除数组中的某个元素，而removeChild()是删除DOM操作的 tr 标签，且spile() 必须使用，否则只删除DOM操作而没有删除元素会使得添加一条新的数据会将之前所操作的数据一并渲染出来；

 function del(index) {
            // 删除数组中的这条信息
            stus.splice(index, 1);
            // 删除DOm数组信息
            // tbody.removeChild(该条信息的tr);
            let res = document.getElementsByClassName("newTr")[index];
            tbody.removeChild(res);
        }

1-4、 script 代码整合如下：

<script>
let sex = document.getElementById('sex');
        let but = document.getElementById('but');
        let input = document.getElementsByTagName('input');
        let tbody = document.getElementsByTagName('tbody')[0];
        // 模拟一个数据
        // let stus = [{
        //     name: '李四',
        //     age: 19;sex: '男',
        //     phone: 13488888888
        // }];

        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);
                // 2、对数组进行一个遍历
                let tr = '';
                stus.forEach((item, index) => {
                    tr += " <tr class='newTr'>" +
                        "<td>" + item.name + "</td>" +
                        "<td>" + item.age + "</td>" +
                        "<td>" + item.sex + "</td>" +
                        "<td>" + item.phone + "</td>" +
                        "<td οnclick='del(" + index + ")'> 删除 </td>" +
                        "</tr>";
                });
                tbody.innerHTML = tr;
            }
            //  删除操作
        function del(index) {
            // 删除数组中的这条信息
            stus.splice(index, 1);
            // 删除DOm数组信息
            // tbody.removeChild(该条信息的tr);
            let res = document.getElementsByClassName("newTr")[index];
            tbody.removeChild(res);
        }
</script>

以上就是原生JavaScript实现tidolist中的添加、删除的全部操作流程。