动态添加样式

【myApps/OBPM版本号】：v4.4- sp XX
【浏览器类型】：Chrome/其他
【联系方式-QQ】：1451348714
【联系电话】:
【问题描述】：如下图，根据登记时间与系统时间动态改变数据背景颜色。（求实现方法）

1. (function() {         
   
2. 
   
3.     var doc=getCurrentDocument();      
   
4.     var v_time = format (doc.getItemValueAsDate("日期"),"yyyy-MM-dd HH:mm:ss");
   
5.     var current_time=getCurDate("yyyy-MM-dd HH:mm:ss");
   
6.     var diff = diffDays(v_time,current_time);
   
7.     println("diffDays------->"+diff);
   
8.     var html=""
   
9.         if(diff<0){
   
10.          html="<p class='btn'  style='color: #fff;background-color: #337ab7;border-color: #2e6da4;'>正常</p>"
    
11.          }else{
    
12.          html="<p class='btn' style='color: #fff;background-color: #d9534f;border-color: #d43f3a;'>超时</p>"
    
13. //btn, 我是喜欢这个圆角的效果，不喜欢可以去掉。如果手机端没有圆角，估计这个圆角就得自己写个style
    
14.          }
    
15.     return html;                                      
    
16. })();

复制代码

这样的效果行不行？

脚本写在这里

我测试脚本的链接，可能一会就删除了，仅供参考
121.37.193.108:8080/obpm

补充内容 (2021-3-2 23:42):
p标签要改成span，给写忘记了。

nuan1989 发表于 2021-3-2 18:13
补充内容 (2021-3-2 23:42):
p标签要改成span，给写忘记了。

不是这样，有没有方法让该条数据整行加背景颜色吗？

天翎用户110 发表于 2021-3-3 09:21
不是这样，有没有方法让该条数据整行加背景颜色吗？

能， 但是不能支持移动端， 这个可以支持移动端。不过移动端好像没有btn， 需要自己把样式复制过来。

漂亮吧。

要整行高亮的， 还更简单点。直接用js写，用js判断。你自己先玩玩， 不行的话晚上给你弄。

白天得干活。事多，没机会摸鱼了。

是不是这样，只支持good主题，vue不知道为啥不行，没空深究，你自己玩玩。大概就是这个意思吧，代码你自己优化。

1. (function() {         
   
2. 
   
3.     var doc=getCurrentDocument();      
   
4.     var v_time = format (doc.getItemValueAsDate("日期"),"yyyy-MM-dd HH:mm:ss");
   
5.     var current_time=getCurDate("yyyy-MM-dd HH:mm:ss");
   
6.     var diff = diffDays(v_time,current_time);
   
7.     println("diffDays------->"+diff);
   
8.     var html=""
   
9.         if(diff<0){
   
10.       html="<span class='normal'  style='display: inline-block; margin-bottom: 0px;font-weight: normal;text-align: center;vertical-align: middle;touch-action: manipulation;cursor: pointer;background-image: none;white-space: nowrap;user-select: none;border-width: 1px;border-style: solid; border-color: transparent;border-image: initial;padding: 2px 8px;border-radius: 4px; color: #fff;background-color: #337ab7;border-color: #2e6da4;'>正常</span>"
    
11.     }else{
    
12.       html="<span class='overrun'   style='display: inline-block; margin-bottom: 0px;font-weight: normal;text-align: center;vertical-align: middle;touch-action: manipulation;cursor: pointer;background-image: none;white-space: nowrap;user-select: none;border-width: 1px;border-style: solid; border-color: transparent;border-image: initial;padding: 2px 8px;border-radius: 4px; color: #fff;background-color: #d9534f;border-color: #d43f3a;'>超时</span>"
    
13.          }
    
14. 
    
15.     html += " <script type="text/javascript">";
    
16.         html += "$(document).ready(function(){";
    
17.     html +="jQuery('.overrun').parents('tr').css('background-color','#ff4d4d');";
    
18.         html += "});";
    
19.         html +=" </script>";
    
20. 
    
21.     return html;                                      
    
22. })();

复制代码

nuan1989 发表于 2021-3-3 10:27
是不是这样，只支持good主题，vue不知道为啥不行，没空深究，你自己玩玩。大概就是这个意思吧，代码你自 ...

好的，谢谢啦！

关于您所提出的问题，目前同事这边已经给出出解决方法了哦，由于该帖楼主超过7天未响应，故该贴状态改为"已解决"，后续如有其他问题可重新发帖或在我们的技术QQ群发出响应，我们将为您安排技术同事解答哟~~