table表格-新增-删除

最新推荐文章于 2022-07-19 15:20:17 发布

Allen·赵

最新推荐文章于 2022-07-19 15:20:17 发布

阅读量482

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108921044

版权

js 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

table表格-新增-删除

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

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


<script>
    /*
        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()

    */




    // 建立数组,模拟数据库的数据
    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>
</body>

Allen·赵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
table表格-新增-删除

table表格-新增-删除<style> table{ border-collapse: collapse; } table td{ width: 100px; line-height: 30px; border: 1px solid #000; text-align: center; }</style></head><body>姓名:
复制链接

扫一扫