获取输入框的值添加到表格中并且实现删除表格内容的功能

超级无敌奥特蔓

已于 2022-03-28 14:23:07 修改

阅读量777

点赞数

分类专栏： Dom 文章标签： javascript

于 2022-03-28 13:12:22 首次发布

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123789476

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路：采用字符串拼接的方式，将数组中对象添加到表格中。

实现获取输入框的内容添加到表格中的效果：首先定义一个空数组用来存放数据对象。接着执行事件三要素（获取事件源、注册事件，事件的执行过程）。简单的可以理解为把获取的元素值封装成对象放到数组中，然后调用封装好的loadList()函数遍历数组中的每个元素将其采用字符串拼接的方式放到tbody中即可。（注：若想使每次添加完输入框为方便下次输入，只需将输入框的值等于空）

实现删除表格内容的效果：在封装好的函数loadList()中添加一个删除按钮，并为其绑定一个onclick点击事件,点击按钮就会调用删除函数，函数中的实参就是使用${" "} 来进行拼接的一个字符串,字符串的内容是要删除对象的序号，点击按钮时就会执行删除函数。(注：删除是根据添加的序号来进行的，所以添加的时候序号不要重复，否则序号一样的会一起删除呐)

方法一在删除函数中使用filter过滤的方法进行删除：

根据函数传递过来的序号值来进行过滤删除，把数组中的当前值与传递过来的值不相等的过滤出来重新赋值给原数组，结束之后调用函数loadList()即可。

方法二在删除函数中使用splice()+findIndex()的方法进行删除：

使用splice()首先需要知道要删除元素的下标，因此使用findIndex()来进行查找索引，把数组中的当前值与传递过的值相等的索引返回给变量index，然后使用splice(索引号，删除几个)来进行删除即可。最后在调用loadList()刷新一下数组中的元素即可。

<!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>
</head>

<body>
    <input type="text" id="ipt1" />
    <input type="text" id="ipt2" />
    <button id="btn">添加</button>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>学生姓名</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        //实现添加功能
        //定义一个空数组用来存放数据
        var arr = [];
        var btn = document.querySelector("#btn");
        btn.onclick = function() {
            //点击按钮的时候要干什么事件，要做的事件就写到函数里
            var ipt1 = document.querySelector("#ipt1");
            var ipt2 = document.querySelector("#ipt2");
            //获取输入框的值
            var snum = ipt1.value;
            var sname = ipt2.value;
            //定义对象添加到数组中
            var obj = {
                num: snum,
                name: sname,
            };
            arr.push(obj);
            //调用函数重新加载数组
            loadList();
            //清楚输入框内容
            ipt1.value = "";
            ipt2.value = "";
        };
        //实现删除功能
        /* 方法1：使用filter过滤的方法 */
        /*  function delectClick(snum) {
                      //根据传递过来的学号值来进行过滤删除
                                arr = arr.filter(function(v) {
                                    return v.num != snum;
                                });
                                loadList();
                            } */
        /* 方法2：使用splice(下标，1) 方法-->通过findIndex查找到要删元素的下标*/
        function delectClick(snum) {
            var index = arr.findIndex(function(v) {
                return v.num == snum;
            });
            arr.splice(index, 1);
            loadList();
        }
        //采用字符串拼接的方式把数组中的元素放到tbody中
        //（将其封装成一个函数便于多次调用）
        function loadList() {
            var str = "";
            arr.forEach(function(v) {
                str =
                    str +
                    `<tr>
          <td>${v.num}</td>
          <td>${v.name}</td>
          <td><button onclick="delectClick('${v.num}')">删除</button></td>
        </tr>`;
            });
            var tbody = document.querySelector("tbody");
            tbody.innerHTML = str;
        }
    </script>
</body>

</html>

超级无敌奥特蔓

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
获取输入框的值添加到表格中并且实现删除表格内容的功能

思路：采用字符串拼接的方式，将数组中对象添加到表格中。实现获取文本框的内容添加到表格中的效果：首先定义一个空数组用来存放数据对象。接着执行事件三要素（获取事件源、注册事件，事件的执行过程）。简单的可以理解为把获取的元素值封装成对象放到数组中，然后调用封装好的loadList()函数遍历数组中的每个元素将其采用字符串拼接的方式放到tbody中即可。（注：若想使每次添加完文本框为空方便下次输入，只需将文本框的值等于空）实现删除表格内容的效果：在封装好的函数loadList()中添加一个删除按钮，并为其.
复制链接

扫一扫