实现点击全部表格里面显示全部内容、点击通过表格里面只显示通过的数据

能附上实例的代码

在按钮上加个点击事件,再带个参数到后台,就可以了

使用ajax异步查询能实现

因为你没有给具体的使用表格技术，只能提供给你方案。全部（all）和审核通过(pass)按钮分别绑定事件,例
$("#all_btn).click(function(){
// 传入一个条件，如type=all,后台根据type筛选全部数据返回
//前端根据后台数据，重新刷新表格数据
})

            $("#pass_btn).click(function(){
                    // 传入一个条件，如type=pass,后台根据type筛选出通过审核的数据返回
                    //前端根据后台数据，重新刷新表格数据
        })

问后端要接口呗，用AJAX查询数据内容动态生成表单（AJAX基本上都是差不多的，改好接口和回调函数生成表单就OK拉），也可以在生成整个表单之后用静态的JS去隐藏显示，这样有个缺点就是....点击按钮获取的数据不是最新的，得刷新。

 <!-- 这是用JS控制静态页面-->
<style type="text/css">
    ul,li,tr,td,table{
        margin: 0;
        padding: 0;
        font-size: 10px;
    }
    button{
        width: 90px;
        height: 35px;
        background: #7080bb;
        color: #fff;
        margin-left: 30px;
        margin-bottom: 10px;
        border-radius: 5px;
        border: none;
    }
    .btnchack{
        background-color: #2e489e!important;
    }
    .title{
        background-color: rgba(228,228,228,1);
    }
    .color1{
        background-color: #fff;
    }
    .color2{
        background-color: rgba(247,245,246,1);
    }
    tbody td{
        float: left;
    }
    table li{
        float: left;
        list-style-type:none;
        width: 90px;
        text-align: center;
        border: 1px solid #d6d6d6;
        height: 30px;
        line-height: 30px;
    }
    table ul:after{
        content: " ";
        display: block;
        clear: both;
    }
</style>
<body>
<div>
    <button id="btn1">全部</button>
    <button id="btn2">审核通过</button>
    <button id="btn3">审核未通过</button>
</div>
<table>
    <tr>
        <td class="title">
            <ul>
            <li>序号</li>
            <li>广告位名称</li>
            <li>广告位区域</li>
            <li>价格</li>
            <li>支付方式</li>
            <li>购买时间</li>
            <li>到期时间</li>
            <li>购买商家</li>
            <li>商家电话</li>
            <li>状态</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td class="content color1">
            <ul>
                <li>1</li>
                <li>品牌墙</li>
                <li>杭州，拱墅区</li>
                <li>500/月</li>
                <li>银联卡</li>
                <li>2016-06-01</li>
                <li>2016-08-01</li>
                <li>黄生xxxxx@木</li>
                <li>180xxxxxxxx89</li>
                <li class="pass">已审核通过</li>
            </ul>
        </td>
        <td class="content color2">
            <ul>
                <li>2</li>
                <li>品牌墙</li>
                <li>杭州，拱墅区</li>
                <li>500/月</li>
                <li>银联卡</li>
                <li>2016-06-01</li>
                <li>2016-08-01</li>
                <li>黄生xxxxx@木</li>
                <li>180xxxxxxxx89</li>
                <li class="pass">已审核通过</li>
            </ul>
        </td>
        <td class="content color1">
            <ul>
                <li>3</li>
                <li>品牌墙</li>
                <li>杭州，拱墅区</li>
                <li>500/月</li>
                <li>银联卡</li>
                <li>2016-06-01</li>
                <li>2016-08-01</li>
                <li>黄生xxxxx@木</li>
                <li>180xxxxxxxx89</li>
                <li class="pass">已审核通过</li>
            </ul>
        </td>
        <td class="content color2">
            <ul>
                <li>4</li>
                <li>品牌墙</li>
                <li>杭州，拱墅区</li>
                <li>500/月</li>
                <li>银联卡</li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li class="fail">未通过</li>
            </ul>
        </td>
    </tr>
</table>
</body>
<script>
    window.onload = function () {
        $('#btn1').click(function () {
            $('#btn1').addClass('btnchack');
            $('#btn2').removeClass('btnchack');
            $('#btn3').removeClass('btnchack');
            $('.content ul').css('display','block')
        });
        $('#btn2').click  (function () {
            $('#btn2').addClass('btnchack');
            $('#btn1').removeClass('btnchack');
            $('#btn3').removeClass('btnchack');
            $('.pass').parent().css('display','block');
            $('.fail').parent().css('display','none');
        });
        $('#btn3').click(function () {
            $('#btn3').addClass('btnchack');
            $('#btn1').removeClass('btnchack');
            $('#btn2').removeClass('btnchack');
            $('.pass').parent().css('display','none');
            $('.fail').parent().css('display','block');
        });
    }

    /*
    var configObj = {
       method   //数据的提交方式：get和post
       url   //数据的提交路劲
       async   //是否支持异步刷新，默认是true
       data    //需要提交的数据
       dataType   //服务器返回数据的类型，例如xml,String,Json等
       success    //请求成功后的回调函数
       error   //请求失败后的回调函数
    }

$.ajax(configObj);//通过$.ajax函数进行调用。
     */
</script>

全部
已通过
未通过

状态
1	已通过
2	未通过
3	已通过
4	已通过

$(function(){ $("#all").click(function(){ $(".pass").show(); $(".npass").show(); }); $("#pass").click(function(){ $(".npass").hide(); $(".pass").show(); }); $("#npass").click(function(){ $(".pass").hide(); $(".npass").show(); }); }); 
是这样吗？

图片说明

$(function(){
$("#all").click(function(){
$(".pass").show();
$(".npass").show();
});
$("#pass").click(function(){
$(".npass").hide();
$(".pass").show();
});
$("#npass").click(function(){
$(".pass").hide();
$(".npass").show();
});
});

艾玛，套个vue 来个双向绑定，给个值筛选一下，so easy 。