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

报告相同问题?

悬赏问题

  • ¥15 ImportError: DLL load failed while importing _iterative: 找不到指定的模块。
  • ¥15 控制工程研究生方向选择
  • ¥15 如何通过交互分析得出某高危患者对放疗获益更多
  • ¥15 相关性分析中,p<0.05, r=0.29,怎么评价相关性呢
  • ¥15 docker部署Mongodb后输入命令报错?
  • ¥15 将下列流程图转变成python程序代码
  • ¥15 我需要全国每个城市的最新小区名字等数据。
  • ¥15 开发一个小区生态的小程序
  • ¥15 如何解决Excel中dependent dropdown list 的问题
  • ¥15 MddBootstrapInitialize2失败