JavaScript中表格的添加与删除

最新推荐文章于 2022-09-12 11:41:02 发布

ab_dk

最新推荐文章于 2022-09-12 11:41:02 发布

阅读量359

点赞数

本文链接：https://blog.csdn.net/ab_dk/article/details/105169794

版权

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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"><br>
    性别:男<input type="radio" value="男" name="sex">
        女<input type="radio" value="女" name="sex">
        保密<input type="radio" value="保密" name="sex"><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>
        var arr = [
            { name:'张三' , age:18, sex:'男', city:'北京' },
            { name:'李四' , age:19, sex:'女', city:'上海' },
            { name:'王五' , age:28, sex:'男', city:'广州' },
            { name:'赵六' , age:38, sex:'女', city:'深圳' },
            { name:'刘七' , age:48, sex:'保密', city:'天津' }   
        ];
        
        var oTb = document.querySelector( 'tbody' );
        var oBtn = document.querySelector( '[name="add"]' );
        setTab();
        oBtn.onclick = function(){
            var oIptName = document.querySelector( '[type="text"]' ).value;
            var oIptAge = document.querySelector( '[type="number"]' ).value;
            var oIptSex = document.querySelectorAll( '[type="radio"]' );
            var oIptSexVal = 0;
            oIptSex.forEach( function( item ){
                if( item.checked === true ){
                    oIptSexVal = item.value
                }
            } );
            var oIptCity = document.querySelector( 'select' ).value;
            var obj = { name:oIptName , age:oIptAge , sex:oIptSexVal, city:oIptCity };
            arr.push(obj);
            setTab();
        }
        
      

        function setTab(){
            var str = '';
            arr.forEach(function(item,key){
                str += '<tr>';
                str += `<td>${key+1}</td>`;
                for(var k in item){
                    str += `<td>${item[k]}</td>`;
                }
                str += `<td><button index="${key}">删除</button></td>`;
                str += '</tr>';
            })
            oTb.innerHTML = str;
            del()
        }
        
        function del(){
            var oBtnDel = document.querySelectorAll('tbody  button')
            oBtnDel.forEach(function(item){
                item.onclick = function(){
                    var index = item.getAttribute('index');
                    arr.splice(index,1);
                    setTab();
                }
            })
        }
        
        
    </script>
</body>
</html>

表格实现效果
在这里插入图片描述
增加数据

删除数据
在这里插入图片描述

ab_dk

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中表格的添加与删除

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume...
复制链接

扫一扫