zhang5476499
「已注销」
采纳率80%
2016-06-20 15:57

如何用jquery给表格中入职日期相同的行的背景颜色染色?

20
已采纳

问题应该不难,项目用的是开源的jquery框架,当然你的实现是原生的js也没问题。
老需求是这样的,从后台中传递过来多个记录,每条记录的背景颜色是相间的,也就是说,第1行的背景色是红色的,下一行就是蓝的,再下一行是红的。新需求是:根据日期来判断,如果这两个记录的日期一样,那么,他们的背景颜色相同。日期默认是升序排列的,而且日期的那个td,有中文的"星期x"干扰,不可以去掉这东西。我写了个类似的案例如下(不可以贴公司原代码,否则被发现会蛮惨):

<title>表格背景颜色</title>
<style type="text/css">
    .style1{
        background-color: red;
    }
    .style2{
        background-color:blue;
    }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function(){
    });
</script>
</head>
<body>
    <table id="table1" border="1px">
        <thead>
            <tr><th>员工号</th><th>员工姓名</th><th>入职日期</th></tr>
        </thead>
        <tbody>
            <tr><td>001</td><td>松江</td><td>星期一<br />2016-06-20</td></tr>
            <tr><td>002</td><td>卢俊义</td><td>星期三<br />2016-06-22</td></tr>
            <tr><td>003</td><td>吴用</td><td>星期三<br />2016-06-22</td></tr>
            <tr><td>004</td><td>林冲</td><td>星期四<br />2016-06-23</td></tr>
            <tr><td>005</td><td>鲁智深</td><td>星期五<br />2016-06-24</td></tr>
        </tbody>
    </table>
</body>
</html> 

要求:卢俊义和吴用这两行的背景颜色相同,因为他们的入职日期相同。上一个人写这块需求的做法是:用el表达式的索引index来做,如果index%2==0,就令tr的class=style1,否则tr的class=style2.这样只能奇偶变色!这个table直接有id,可以直接获取!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • wk327571348 oldkKing 5年前
     <script type="text/javascript" language="javascript">
        $(document).ready(function(){
            $("#table1 tr").each(function(){
                var id = $(this).children().eq(0).html();
                var val = ($(this).children().eq(2).html().split('星期'))[1];
                if(val!=null&&''!=val){
                    val=val.substring(5,15);
                    $("#table1 tr").each(function(){
                        if($(this).children().eq(2).html().indexOf(val)>=0){
                            if($(this).children().eq(0).html()!=id){
                                $(this).css({"background-color":"#46B8DA"});
                            }
                        }
                    });
                }
            });
        });
    </script>
    
    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 5年前
         <table id="table1" border="1px">
            <thead>
                <tr><th>员工号</th><th>员工姓名</th><th>入职日期</th></tr>
            </thead>
            <tbody>
                <tr><td>001</td><td>松江</td><td>星期一<br />2016-06-20</td></tr>
                <tr><td>002</td><td>卢俊义</td><td>星期三<br />2016-06-22</td></tr>
                <tr><td>003</td><td>吴用</td><td>星期三<br />2016-06-22</td></tr>
                <tr><td>004</td><td>林冲</td><td>星期四<br />2016-06-23</td></tr>
                <tr><td>005</td><td>鲁智深</td><td>星期五<br />2016-06-24</td></tr>
            </tbody>
        </table>
    <script>
        $(document).ready(function () {
            var red=true,date
            $('#table1').find('tbody tr').each(function () {
                var d = $('td', this).eq(2).text().match(/\d{4}(-\d{2}){2}/);
                if (d) { if (d[0] != date) { red = !red; date = d[0]; } }
                else red = !red;
                this.style.backgroundColor = red ? 'red' : 'blue';
            });
        });
    </script>
    
    点赞 1 评论 复制链接分享
  • xuyunfei_2012 徐云飞-web 5年前

    直接用js就可以了,同意楼上

    点赞 评论 复制链接分享
  • zhs471420954 zhs471420954 5年前

    通过js或者java脚本构造一个key,val的map结构,以日期为key,颜色为val,每次循环显示的时候用当前的日期去map中获取颜色val,如果没有就 put这个值到map,根据循环index%2显示默认颜色

    点赞 评论 复制链接分享