「已注销」 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条)

报告相同问题?

悬赏问题

  • ¥30 Matlab打开默认名称带有/的光谱数据
  • ¥50 easyExcel模板 动态单元格合并列
  • ¥15 res.rows如何取值使用
  • ¥15 在odoo17开发环境中,怎么实现库存管理系统,或独立模块设计与AGV小车对接?开发方面应如何设计和开发?请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
  • ¥15 CSP算法实现EEG特征提取,哪一步错了?
  • ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
  • ¥15 vue3前端取消收藏的不会引用collectId
  • ¥15 delphi7 HMAC_SHA256方式加密
  • ¥15 关于#qt#的问题:我想实现qcustomplot完成坐标轴
  • ¥15 下列c语言代码为何输出了多余的空格