none
jquery 如何能去掉表中指定列重复的数据 RRS feed

  • 问题

  • 我有如下的表,我想让年月列,如果有重复,就隐藏该单元格

    序号     年月 部门 录入人
    1 2017-12 教育部 xx
    2 2017-7 运输部 11111
    3 2017-7 财务部 xxxc
    4 2017-6 财务部 sdc
    5 2017-6 运输部 sdc

    变成

             

    序号     年月 部门 录入人
    1 2017-12 教育部 xx
    2 2017-7 运输部 11111
    3         财务部 xxxc
    4 2017-6 财务部 sdc
    5          运输部 sdc

    用jquey 如何实现?

    2017年8月6日 1:58

答案

  • 你好,

    你可以尝试使用下面的代码:

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function () { var tr = $(".table").find("tr"); var rowspan = 1; for (var i = tr.length - 1; i > 0; i--) { //得到前一行第二列的值. var predate = $(tr[i - 1]).find("td:eq(1)").html(); //得到当前行第二列的值. var date = $(tr[i]).find("td:eq(1)").html(); //比较数据 if (predate == date) { rowspan++;

    //删除当前单元格,方便设置rowspan 属性 $(tr[i]).find("td:eq(1)").remove(); } else { //设置rowspan属性 $(tr[i]).find("td:eq(1)").attr("rowspan", rowspan); nextdate = date; rowspan = 1; } }; }); </script> <table class="table table-hover"> <thead> <tr > <th>序号</th> <th>年月</th> <th>部门</th> <th>录入人</th> <th>录入时间</th> <th></th> </tr> </thead> <tr> <td>0</td> <td >2017-12</td> <td>教育部</td> <td>xx</td> <td>2017-12-24</td> <td><a href="/ghLMTest/ttt/Details/8">浏览</a></td> </tr> <tr> <td>1</td> <td >2017-12</td> <td>教育部</td> <td>xx</td> <td>2017-12-24</td> <td><a href="/ghLMTest/ttt/Details/8">浏览</a></td> </tr> <tr> <td>2</td> <td>2017-7</td> <td>运输部</td> <td>11111</td> <td>2017-7-24</td> <td><a href="/ghLMTest/ttt/Details/8">浏览</a></td> </tr> <tr> <td>3</td> <td>2017-7</td> <td>运输部</td> <td>xxxx</td> <td>2017-07-29</td> <td> <a href="/ghLMTest/ttt/Details/1017">浏览</a> </td> </tr> <tr> <td>4</td> <td>2017-6</td> <td>财务部</td> <td>11111</td> <td>2017-06-29</td> <td> <a href="/ghLMTest/ttt/Details/1017">浏览</a> </td> </tr> </table>

    结果输出如下:

    • 已建议为答案 ThankfulHeart 2017年8月8日 8:33
    • 已标记为答案 icod 2017年8月9日 4:13
    2017年8月8日 6:08
    版主

全部回复

  • 论坛的排版有的问题,就是年月字段重复,则隐藏
    2017年8月6日 9:17
  • 你的前端的表格用什么制作的?jQuery的Table还是什么技术呢?

    具体生成代码呢?


    ASP.NET Forum
    StackOverFlow
    FreeRice Donate
    Issues to report



    2017年8月6日 9:34
  • 你好,后端是mvc,前端就是普通的html和bootstrap

    <table class="table table-hover">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>年月</th>
                        <th>部门</th>
                        <th>录入人</th>
                        <th>录入时间</th>
                        <th></th>
                    </tr>
                </thead>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        2017-12
                    </td>
                    <td>
                        运输部
                   </td>
                    <td>
                       xx
                    </td>
                    <td>
                        2017-12-24
                    </td>
                    <td>
                        <a href="/ghLMTest/ttt/Details/8">浏览</a> 
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        2017-7
                    </td>
                    <td>
                        财务部
                   </td>
                    <td>
                       11111
                    </td>
                    <td>
                        2017-07-29
                    </td>
                    <td>
                        <a href="/ghLMTest/ttt/Details/1017">浏览</a> 
                    </td>
                </tr>
      
                ...................
            </table>
    

    2017年8月6日 10:21
  • <table border="1">
        <tr><td>序号</td><td>年月</td><td>部门</td><td>录入人</td></tr>
        <tr><td>1</td><td>2017-12</td><td>部门</td><td>录入人</td></tr>
        <tr><td>2</td><td>2017-7</td><td>部门</td><td>录入人</td></tr>
        <tr><td>3</td><td>2017-7</td><td>部门</td><td>录入人</td></tr>
        <tr><td>4</td><td>2017-6</td><td>部门</td><td>录入人</td></tr>
        <tr><td>5</td><td>2017-6</td><td>部门</td><td>录入人</td></tr>
    </table>
     
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        var kv = {}
        $('table tr:gt(0) td:nth-child(2)').each(function () {
            if (kv[this.innerHTML]) this.innerHTML = '';
            else kv[this.innerHTML] = true;
        });
    </script>

    答案有了,可是还是不太明白

     $('table tr:gt(0) td:nth-child(2)')

    这句是 过滤表格(大于第一行标题行) 单元格只选第2列

     if (kv[this.innerHTML])

     这句是怎么判断出重复的?

    2017年8月6日 12:41
  • 你好,

    你可以尝试使用下面的代码:

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function () { var tr = $(".table").find("tr"); var rowspan = 1; for (var i = tr.length - 1; i > 0; i--) { //得到前一行第二列的值. var predate = $(tr[i - 1]).find("td:eq(1)").html(); //得到当前行第二列的值. var date = $(tr[i]).find("td:eq(1)").html(); //比较数据 if (predate == date) { rowspan++;

    //删除当前单元格,方便设置rowspan 属性 $(tr[i]).find("td:eq(1)").remove(); } else { //设置rowspan属性 $(tr[i]).find("td:eq(1)").attr("rowspan", rowspan); nextdate = date; rowspan = 1; } }; }); </script> <table class="table table-hover"> <thead> <tr > <th>序号</th> <th>年月</th> <th>部门</th> <th>录入人</th> <th>录入时间</th> <th></th> </tr> </thead> <tr> <td>0</td> <td >2017-12</td> <td>教育部</td> <td>xx</td> <td>2017-12-24</td> <td><a href="/ghLMTest/ttt/Details/8">浏览</a></td> </tr> <tr> <td>1</td> <td >2017-12</td> <td>教育部</td> <td>xx</td> <td>2017-12-24</td> <td><a href="/ghLMTest/ttt/Details/8">浏览</a></td> </tr> <tr> <td>2</td> <td>2017-7</td> <td>运输部</td> <td>11111</td> <td>2017-7-24</td> <td><a href="/ghLMTest/ttt/Details/8">浏览</a></td> </tr> <tr> <td>3</td> <td>2017-7</td> <td>运输部</td> <td>xxxx</td> <td>2017-07-29</td> <td> <a href="/ghLMTest/ttt/Details/1017">浏览</a> </td> </tr> <tr> <td>4</td> <td>2017-6</td> <td>财务部</td> <td>11111</td> <td>2017-06-29</td> <td> <a href="/ghLMTest/ttt/Details/1017">浏览</a> </td> </tr> </table>

    结果输出如下:

    • 已建议为答案 ThankfulHeart 2017年8月8日 8:33
    • 已标记为答案 icod 2017年8月9日 4:13
    2017年8月8日 6:08
    版主