原生js--动态表格（升级版）

最新推荐文章于 2024-08-06 10:02:08 发布

咖啡壶子

最新推荐文章于 2024-08-06 10:02:08 发布

阅读量1.2k

点赞数

分类专栏： # 案例展示文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/TroyeSivanlp/article/details/121297649

版权

案例展示专栏收录该内容

10 篇文章 2 订阅

订阅专栏

原生js升级版他来啦，瞧一瞧看一看啦

原生js–动态表格（基础版）	https://blog.csdn.net/TroyeSivanlp/article/details/121297629
原生js–动态表格（升级版）	https://blog.csdn.net/TroyeSivanlp/article/details/121297649

原生js–动态表格（升级版）

演示：

在这里插入图片描述

代码：

js代码：

window.addEventListener('load', function () {
    var data = [{
        id: 1,
        pname: '小米',
        price: 3999
    }, {
        id: 2,
        pname: 'oppo',
        price: 999
    }, {
        id: 3,
        pname: '荣耀',
        price: 1299
    }, {
        id: 4,
        pname: '华为',
        price: 999
    }, {
        id: 5,
        pname: '小米',
        price: 12199
    }, {
        id: 6,
        pname: '荣耀',
        price: 123999
    }, {
        id: 7,
        pname: '华为',
        price: 1999
    }];
    //模态框start

    var index = 0;
    var login = document.querySelector('#login');
    var login1 = document.querySelector('#login1');
    var bg = document.querySelector('#bg');
    var idname = document.querySelector('#idname');
    var phone = document.querySelector('#phone');
    var money = document.querySelector('#money');
    var idname1 = document.querySelector('#idname1');
    var phone1 = document.querySelector('#phone1');
    var money1 = document.querySelector('#money1');
    var login_button_submit = document.querySelector('#login-button-submit');
    var login_button_refresh = document.querySelector('#login-button-refresh');
    var closeBtn = document.querySelector('#closeBtn');
    var closeBtn1 = document.querySelector('#closeBtn1');
    //模态框end

    //查询相关start
    var search_price = document.querySelector('.search-price');
    var start = document.querySelector('.start');
    var end = document.querySelector('.end');
    var product = document.querySelector('.product');
    var search_pro = document.querySelector('.search-pro');
    //查询相关end

    //
    var tbody = document.querySelector('tbody');
    var add = document.querySelector('.add');
    var delet = document.querySelector('.delet');
    var reset = document.getElementById('reset');
    load(data);
    reset.addEventListener('click', resets);
    delet.addEventListener('click', deleteButton);

    //当鼠标点击时显示遮罩层
    add.addEventListener('click', function () {
        bg.style.display = 'block';
        login.style.display = 'block';
        login_button_submit.addEventListener('click', addData);
    })
    login_button_refresh.addEventListener('click', function () {
        var obj = {
            id: idname1.value,
            pname: phone1.value,
            price: money1.value
        };
        console.log(obj);
        data.splice(index - 1, 1, obj);
        idname.value = '';
        phone.value = '';
        money.value = '';
        closeBtn1.click();
        load(data);
    });
    //当鼠标点击closeBtn标签，显示遮罩层和模态框
    closeBtn.addEventListener('click', function () {
        bg.style.display = 'none';
        login.style.display = 'none';

    })
    closeBtn1.addEventListener('click', function () {
        bg.style.display = 'none';
        login1.style.display = 'none';
    })
    search_price.addEventListener('click', function () {
        var newDate = data.filter(function (value) {
            return value.price >= start.value && value.price <= end.value;
        })
        load(newDate);

    })
    search_pro.addEventListener('click', function () {
        var arr = [];
        data.filter(function (value) {
            if ((value.pname).indexOf(product.value) !== -1) {
                arr.push(value);
                return true;
            }
        })
        load(arr);


    })
    //隔行变色
    function changeColor() {
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // console.log(trs);
        //2注册事件
        for (var i = 0; i < trs.length; i++) {
            //3.鼠标经过表格元素时,将tr的classNamae改为bg
            trs[i].onmouseover = function () {
                this.className = 'bgc';
            }
            //3.鼠标经过表格元素时,将tr的classNamae改为空字符串
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
    }

    //增加一条数据
    function addData() {
        if (idname.value == '' || phone.value == '' || money.value == '') {
            alert('输入不能为空,重新输入');
        } else {
            var obj = {
                id: idname.value,
                pname: phone.value,
                price: money.value
            };
            data.unshift(obj);
            closeBtn.click();
        }
        load(data);
        idname.value = '';
        phone.value = '';
        money.value = '';
        deleteOne();

    }
    //修改数据
    function editData() {
        var modify = document.getElementsByClassName('modify');
        var trs = document.querySelectorAll('tr');
        
        for (var i = 0; i < modify.length; i++) {
            modify[i].addEventListener('click', function () {
                index = this.parentNode.parentNode.rowIndex;
                console.log(index)
                bg.style.display = 'block';
                login1.style.display = 'block';
                idname1.value = trs[index].children[2].innerHTML;
                phone1.value = trs[index].children[3].innerHTML;
                money1.value = trs[index].children[4].innerHTML;
            })
        }
    }
    //利用a标签删除行
    function deleteOne() {
        var shanchu = document.getElementsByClassName('shanchu');
        for (var i = 0; i < shanchu.length; i++) {
            shanchu[i].onclick = function () {
                var index = this.parentNode.parentNode.rowIndex;
                // tbody.removeChild(this.parentNode.parentNode);
                data.splice(index - 1, 1);
                load(data);
            }
        }

    }
    //全选反选框
    function buttons() {
        var cb = document.getElementById('j_cbAll');
        var tbs = document.getElementById('j_tb').querySelectorAll('input');

        cb.addEventListener('click', function () {
            //当全选框的状态为true时,单选框的状态也要为true,否则为false
            for (var i = 0; i < tbs.length; i++) {
                tbs[i].checked = this.checked;
            }
        })
        for (var i = 0; i < tbs.length; i++) {
            tbs[i].addEventListener('click', function () {
                // var flag=true;
                for (var i = 0; i < tbs.length; i++) {
                    if (tbs[i].checked == false) {
                        cb.checked = false;
                        return;
                    }
                }
                cb.checked = true;
            })

        }

    }
    //删除a标签
    function deleteButton() {
        var cb = document.getElementById('j_cbAll');
        var tbs = document.getElementById('j_tb').querySelectorAll('input');
        for (var i = 0; i < tbs.length; i++) {
            if (tbs[i].checked == true)
                tbody.removeChild(tbs[i].parentNode.parentNode);
        }
        var cb = document.getElementById('j_cbAll');
        if (tbs.length == 0) {
            console.log(tbs.length)
            cb.disabled = true;
        }

    }
    // 重载方法
    function load(mydata) {
        tbody.innerHTML = '';
        mydata.forEach(function (value, index) {
            var tr = document.createElement('tr');
            tr.innerHTML = `
                <td><input type="checkbox"></td>
                <td>${index + 1}</td>
                <td>${value.id}</td>
                <td>${value.pname}</td>
                <td>${value.price}</td>
                <td><a href="javascript:;" class="modify">修改 </a></td>
                <td><a href="javascript:;" class="shanchu">删除 </a></td>
                `;
            tbody.append(tr);
        })
        changeColor();
        buttons()
        deleteOne();
        editData();
    }

    //重置
    function resets() {
        tbody.innerHTML = "";
        var datas = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }];
        load(datas);
    }


})

css代码：


ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
    padding: 0px;
    margin: 0px;
}

table {
    width: 550px;
    border: 1px solid #000;
    border-collapse: collapse;
    margin: 0 auto;
}
td,
th {
    border: 1px solid #000;
    text-align: center;
    width: 50px;
    height:27px
}
input {
    width: 50px;
}
.search {
    width: 600px;
    margin: 15px auto;
}
button {
    margin: 5px
}
.login-header {
    width: 100%;
    text-align: center;
    height: 30px;
    font-size: 24px;
    line-height: 30px;
}

.login
,.login1 {
    display: none;
    width: 520px;
    height: 380px;
    position: fixed;
    border: #ebebeb solid 1px;
    left: 50%;
    top: 50%;
    background: #ffffff;
    box-shadow: 0px 0px 20px #ddd;
    z-index: 9999;
    transform: translate(-50%, -50%);
}
.login-title,.login1-title {
    width: 100%;
    margin: 10px 0px 0px 0px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    font-size: 18px;
    position: relative;
    cursor: move;
}
 .login-input-content,.login1-input-content {
    margin-top: 20px;
}
.login-button,.login1-button {
    width: 50%;
    margin: 30px auto 0px auto;
    line-height: 40px;
    font-size: 14px;
    border: #ebebeb 1px solid;
    text-align: center;
}

.login-bg,.login1-bg {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, .3);
}

a {
    text-decoration: none;
    color: #000000;
}
.login-button a,.login-button1 a {
    display: block;
}
.login-input input.list-input,.login1-input input.list-input
{
    float: left;
    line-height: 35px;
    height: 35px;
    width: 350px;
    border: #ebebeb 1px solid;
    text-indent: 5px;
}

.login-input,.login1-input {
    overflow: hidden;
    margin: 0px 0px 20px 0px;
}

.login-input label,.login1-input label {
    float: left;
    width: 90px;
    padding-right: 10px;
    text-align: right;
    line-height: 35px;
    height: 35px;
    font-size: 14px;
}
.login-title span,.login1-title span {
    position: absolute;
    font-size: 12px;
    right: -20px;
    top: -30px;
    background: #ffffff;
    border: #ebebeb solid 1px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
ul.pagination {
    display: inline-block;
    padding: 0;
    width: 500px;
    margin: 0 auto;
 }

.bgc {
    background-color: skyblue;
}
.pagg {
    margin: 0 auto;
    width: 200px;
    height: 30px;
}
li {
    list-style:none;
    display: inline-block;
}

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>

</head>

<body>
    <div id="login" class="login">
        <div id="title" class="login-title">
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>id：</label>
                <input type="text" placeholder="请输入id" id="idname" class="list-input">
            </div>
            <div class="login-input">
                <label>手机名称：</label>
                <input type="text" placeholder="请输入手机名称" id="phone" class="list-input">
            </div>
            <div class="login-input">
                <label>手机价格：</label>
                <input type="text" placeholder="请输入手机价格" id="money" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">提交</a></div>
    </div>



    <div id="login1" class="login1">
        <div id="title" class="login1-title">
            <span><a id="closeBtn1" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login1-input-content">
            <div class="login-input">
                <label>id：</label>
                <input type="text" placeholder="请输入id" id="idname1" class="list-input">
            </div>
            <div class="login-input">
                <label>手机名称：</label>
                <input type="text" placeholder="请输入手机名称" id="phone1" class="list-input">
            </div>
            <div class="login-input">
                <label>手机价格：</label>
                <input type="text" placeholder="请输入手机价格" id="money1" class="list-input">
            </div>
        </div>
        <div id="loginBtn1" class="login1-button"><a href="javascript:void(0);" id="login-button-refresh">更新数据</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <div class="search">
        按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button
            class="search-price">搜索</button>
        按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button><br>
        <button class="add">增加</button>&ensp;<button class="delet">删除</button>
        <button id='reset'>重置</button>

    </div>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id='j_cbAll'></th>
                <th>序号</th>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
                <th>操作</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="j_tb">
        </tbody>
    </table>

</body>

</html>