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

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

问题应该不难,项目用的是开源的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条回答 默认 最新

  • oldkKing 2016-06-21 02:25
    关注
     <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
  • ¥20 Java-Oj-桌布的计算
  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗?
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源
  • ¥15 安卓JNI项目使用lua上的问题
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗
  • ¥15 ikuai客户端l2tp协议链接报终止15信号和无法将p.p.p6转换为我的l2tp线路