js 实现简单的表格操作----增删解惑

最新推荐文章于 2022-02-18 22:19:06 发布

王濤

最新推荐文章于 2022-02-18 22:19:06 发布

阅读量295

点赞数 1

分类专栏： js 文章标签： javascript css html5 html

本文链接：https://blog.csdn.net/Anber_wang/article/details/105190399

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

话不多说，干货走起！！！

首先是 html 部分的代码

<body>
    姓名: <input type="text"><br>
    年龄: <input type="number" min="18" max="250"><br>
    姓名: 男<input type="radio" name="sex" value="男">
          女<input type="radio" name="sex"  value="女">
          人妖<input type="radio" name="sex"  value="人妖"> <br>
    城市: <select>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="重庆">重庆</option>
            <option value="天津">天津</option>
          </select><br>
    <button name="add">添加</button>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>城市</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

接下来设置一下我们的表格的 css 样式

    <style>
        table{
            border-collapse: collapse;
        }

        table td{
            width: 100px;
            line-height: 30px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>

接下来就是我们的重点时刻啦！集中精神啦😁😁😁

JavaScript 部分即将来临，请注意......

先说一下我们的思路

            1, 获取标签对象和设定数据
                arr数组数据---模拟后台数据库数据
                             数组中存储对象
        
                tbody标签对象
                获取添加button按钮对象

            2, 调用执行生成页面函数
                setTab();

            3, 数据添加操作
                给添加button标签,添加点击事件
                    1,获取所有数据标签的参数
                        姓名标签,input标签对象.value
                        年龄标签,input标签对象.value
                        城市标签,select标签对象.value

                        性别数据: 选中的单元框,获取数据
                            获取所有的单选标签 --- 结果是一个伪数组
                            在循环外定义变量, 存储 获取数据的结果
                            循环遍历数组 参数 是 单选标签对象
                               参数.checked 是 true 表示这个标签被选中
                               循环外定义的变量 = 参数.value 数据参数

                    2, 将数据定义为对象的形式,对象的结果比与数组的结构相同
                        数据,就是之前获取到的标签中的数据参数

                    3, 将对象,写入到数组中
                        arr.push(对象)

                    4, 根据新的数组,重新渲染页面,重新调用函数
                        setTab();

            4, 定义生成页面函数 --- setTab
                1,定义变量,赋值空字符串,作用是存储拼接生成的表格内容标签
                2,循环遍历arr数组,根据数组内容,生成table表格内容 参数1,参数2
                    参数1:存储数值的数据,也就是对象
                    参数2,存储数据的索引,也就是对象对应的索引
                    2-1,拼接tr起始标签
                    2-2,拼接 序号单元格 , 内容是 对象单元 对应的 的索引 加1 参数2+1
                    2-3,循环遍历 对象 也就是 参数1
                        拼接 内容单元格 , 是对象的 具体数据
                        通过对象的属性来获取
                    2-4,拼接 删除单元格 , 内容是 button按钮
                        给button按钮,添加自定义属性,属性值 是 对象的索引,也就是参数1
                    2-5,拼接 tr结束标签
                3,将拼接好的字符串,写入到页面中
                    给tbody中写入字符串内容 
                    oTb.innerHTML = str
                4,调用删除函数
                    给tbody中,已经生成的button删除按钮
                    绑定事件,添加删除效果
                    del()

            5,定义删除功能函数  del
              在生成页面的函数中,setTab()函数中,调用del函数
              位置必须是 oTb.innerHTML = str 代码之后
              oTb.innerHTML = str 执行的是将标签写入到tbody中
              执行完之后,tbody才有内容,才有删除button按钮

                1,获取所有的删除标签 , 结果是一个伪数组
                2,循环遍历伪数组 forEach()
                    参数1:标签对象,也就是 删除button按钮
                    参数2:标签对应,对应的索引下标 (不用)
                    
                    给标签参数1 添加 点击事件
                        获取点击标签的自定义属性,属性值
                            这个属性值也就是要删除的对象,在数组中的索引
                            根据索引,从数组中删除单元
                                arr.splice(索引,1)
                            根据新的数组,再次渲染生成新的table表格
                                setTab()

<script>
        // 建立数组,模拟数据库的数据
        var arr = [
            {name:'张三',age:18,sex:'男',city:'北京'},
            {name:'李四',age:19,sex:'女',city:'上海'},
            {name:'王五',age:20,sex:'男',city:'广州'},
            {name:'赵六',age:21,sex:'女',city:'重庆'},
            {name:'刘七',age:22,sex:'人妖',city:'天津'},
        ];

        // 获取tbody标签对象
        var oTb = document.querySelector('tbody');

        // 获取添加button按钮对象
        var oBtnAdd = document.querySelector('[name="add"]');


        // 调用生成页面函数
        setTab();

        // 新增数据操作
        oBtnAdd.onclick = function(){
            // 1,获取数据
            var oIptName = document.querySelector('[type="text"]').value;
            var oIptAge = document.querySelector('[type="number"]').value;
            var oIptCity = document.querySelector('select').value;

            var oIptSex = document.querySelectorAll('[type="radio"]');
            var oIptSexValue = 0;
            oIptSex.forEach(function(item){
                if(item.checked === true){
                    oIptSexValue = item.value;
                }
            })

            // 2,创建对象
            var obj = {
                name:oIptName,
                age:oIptAge,
                sex:oIptSexValue,
                city:oIptCity,
            }

            // 3,将对象,写入数据
            arr.push(obj);

            // 4,根据新的数据,重新渲染生成新的table表格
            setTab();
        }

        // 渲染页面函数
        function setTab(){
            // 定义空字符串
            var str = '';
            // 循环遍历数组,生成页面内容字符串
            arr.forEach(function(item , key){
                // 拼接tr起始标签
                str += '<tr>';
                // 拼接序号单元格
                str += `<td>${key+1}</td>`;
                // 循环对象,拼接生成内容单元格
                for(var k in item){
                    str += `<td>${item[k]}</td>`;
                }
                // 拼接删除单元格
                str += `<td><button index="${key}">删除</button></td>`;
                // 拼接tr结束标签
                str += '</tr>';
            })
            // 将生成的字符串内容,写入tbody标签
            oTb.innerHTML = str;
            // 调用删除函数,给删除button标签,添加点击效果
            del();
        }

        // 删除函数
        function del(){
            // 获取删除button标签对象
            var oBtnDel = document.querySelectorAll('tbody button');
            // 循环遍历伪数组
            oBtnDel.forEach(function(item){
                // 给删除标签,添加点击事件
                item.onclick = function(){
                    // 获取标签index属性的属性值
                    var index = item.getAttribute('index');
                    // 删除对应的对象单元
                    arr.splice(index , 1);
                    // 根据新的数组,重新渲染生成新的页面
                    setTab();
                }
            })
        }


    </script>

运行截图

添加效果

删除效果

王濤

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现简单的表格操作----增删解惑

话不多说，干货走起！！！首先是 html 部分的代码<body> 姓名: <input type="text"><br> 年龄: <input type="number" min="18" max="250"><br> 姓名: 男<input type="radio" name="sex" valu...
复制链接

扫一扫

专栏目录