tab栏、价格筛选完整代码

tab栏

HTML代码

    <div class="textbox" id="tab">
        <h4>js面向对象，动态添加实例</h4>
        <div class="nav">
            <ul>
                <li class="liactive"><span>测试1</span><i class="iconfont icon-guanbi"></i> </li>
                <li><span>测试2</span><i class="iconfont icon-guanbi"></i></li>
                <li><span>测试3</span><i class="iconfont icon-guanbi"></i></li>
            </ul>
            <div class="plus"><i class="iconfont icon-icon_tianjia"></i></div>
        </div>
        <div class="tabscon">
            <section class="conactive">测试1</section>
            <section>测试2</section>
            <section>测试3</section>
        </div>
    </div>


    <script src="tab.js"></script>

css代码

* {
    margin: 0;
    padding: 0;
}

#tab {
    width: 600px;
    height: 400px;
    margin: 200px auto;
    margin-left: 300px;
    border: pink 1px solid;
}

#tab h4 {
    text-align: center;
    border-bottom: pink 1px solid;
}

#tab .nav {
    border-bottom: #ccc 1px solid;
    height: 25px;
}

.nav ul li {
    float: left;
    width: 75px;
    border: #ccc 1px solid;
    font-size: 14px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    border-collapse: collapse;
}

.nav ul li i {
    margin-left: 7px;
}

.plus {
    float: right;
    height: 23px;
    line-height: 23px;
    margin-top: 3px;
    margin-right: 7px;
}

ul {
    float: left;
}

ul li {
    list-style: none;
}

.tabscon {
    padding: 10px;
}

.tabscon section {
    display: none;
}

.tabscon .conactive {
    display: block;
}

.liactive {
    border-bottom: 2px #fff solid!important;
    /* background-color: #e599dbd3; */
}

input {
    width: 40px;
}

js代码

var that;
class Tab {

    constructor(id) {
        that = this;
        this.main = document.querySelector(id);

        this.add = this.main.querySelector('.plus');
        this.ul = this.main.querySelector('.nav ul:first-child');
        this.tabscon = this.main.querySelector('.tabscon');
        this.init();

    }
    init() {
            // 初始化操作让相关元素绑定事件
            this.updateCode();
            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].index = i;
                this.lis[i].onclick = this.toggleTab;
                this.remove[i].onclick = this.removeTab;
                this.sapns[i].ondblclick = this.editTab;
                this.sections[i].ondblclick = this.editTab;
            }
            this.add.onclick = this.addTab;
        }
        // 获取li，修复新增节点无法切换的bug
    updateCode() {
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.remove = this.main.querySelectorAll('.icon-guanbi');
        this.sapns = this.main.querySelectorAll('.nav li span:first-child');
    }
    clearclass() {
            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].className = "";
                this.sections[i].className = "";

            }

        }
        // 切换功能
    toggleTab() {
            that.clearclass();
            this.className = 'liactive';
            that.sections[this.index].className = "conactive";
        }
        // 添加功能
    addTab() {
            // 1.创建li和section元素
            // 2.li和section追加到相应的父元素里
            that.clearclass();
            var li = '<li class="liactive"><span>new</span><i class="iconfont icon-guanbi"></i></li>'
            var section = '<section class="conactive">new测试</section>'
            that.ul.insertAdjacentHTML('beforeend', li);
            that.tabscon.insertAdjacentHTML('beforeend', section);
            that.init();
        }
        // 删除功能
    removeTab(e) {
            e.stopPropagation();
            var index = this.parentNode.index;
            console.log(index);
            that.lis[index].remove();
            that.sections[index].remove();
            that.init();
            // 删除选中选项卡时，让选项卡前一个自动成为选中状态
            if (this.lis[index].className == "liactive") {
                if (index--) {
                    that.lis[index].click();

                }
            }

        }
        // 修改功能
    editTab() {
        // 双击禁止选中文字
        var str = this.innerHTML;
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        this.innerHTML = '<input type="text">';
        var input = this.children[0];
        input.value = str;
        input.select(); //文本框里面的文字被选中
        input.onblur = function() {
            this.parentNode.innerHTML = this.value
        }
        input.onkeyup = function(e) {
            if (e.keyCode == 13) {
                this.blur();
            }
        }
    }

}

var tab = new Tab("#tab");
// tab.init();

价格筛选

<!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>
    <style>
        table {
            width: 400px;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 0 auto;
        }
        
        td,
        th {
            border: 1px solid #000;
            text-align: center;
        }
        
        input {
            width: 50px;
        }
        
        .search {
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <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>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>


        </tbody>
    </table>
    <script>
        // 利用新增数组方法操作数据
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }, ];
        // 1. 获取相应的元素
        var tbody = document.querySelector('tbody');
        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');
        setDate(data);
        // 2. 把数据渲染到页面中
        function setDate(mydata) {
            // 先清空原来tbody 里面的数据
            tbody.innerHTML = '';
            mydata.forEach(function(value) {
                var tr = document.createElement('tr');
                tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
                tbody.appendChild(tr);
            });
        }

        // 3. 根据价格查询商品
        // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
        search_price.addEventListener("click", function() {
            var newDate = data.filter(function(value) {
                return value.price >= start.value && value.price <= end.value;
            });
            setDate(newDate);
        }, false);

        search_pro.addEventListener("click", function() {
            var arr = [];
            var flag = data.some(function(value) {

                if (value.pname === product.value) {
                    arr.push(value);
                    return true;
                }

            })
            setDate(arr);



        }, false);
    </script>
</body>

</html>