javascript根据条件给单元格添加不同颜色的

最新推荐文章于 2024-02-04 14:58:50 发布
最新推荐文章于 2024-02-04 14:58:50 发布
阅读量770 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39833509/article/details/105767546
版权

javascript: 

# cat /static/myscript/myjs.js

 $(".item-comment").mouseover(function () {
      $(this).addClass("commentacthide")
  }).mouseout(function () {
      $(this).removeClass("commentacthide")
  })
  function commentact(e) {
      $(".addcomment").removeClass("hide")
      $(".commentbox").removeClass("hide")
      reNum=$(e).siblings(".item-num").text()
      Actth=$(e)
  }
  function comtexteare(){
      var Comtexteare=$(".commenttext").val()
      $.post("/racv/comment/",{Comment:Comtexteare,CHNum:reNum},function (data) {
          Actth.text(data)
          $(".addcomment").addClass("hide")
          $(".commentbox").addClass("hide")
      })
  }

  $("#cel").click(function () {
      $(".addcomment").addClass("hide")
      $(".commentbox").addClass("hide")
  })

  $(".item-chstarttime").each(function () {
      var starttimecon=$(this).text()
      var chfintime=$(this).siblings(".item-chfintime").text()
      if (starttimecon !== ""){
      var week=new Date(starttimecon.split(" ")[0]).getDay()
          var starttime=Date.parse(new Date(starttimecon))/1000
          var d=new Date()
          var utc = d.getTime() + (d.getTimezoneOffset() * 60000)
          var offset=8
          var nd = new Date(utc + (3600000*offset))
          var currtime=Date.parse(nd)/1000
          var timediff=starttime - currtime
          var timediffw=7*60*60*24
          if (chfintime !== "") {
              var finshtime=Date.parse(new Date(chfintime))/1000
              if ( parseInt(currtime) > parseInt(finshtime)) {
                $(this).siblings(".item-num").addClass("itemhide")
              } else if ( parseInt(timediff) <= parseInt(timediffw)){
                  if (week == 0 || week == 5 || week == 6){
                      $(this).siblings(".item-num").addClass("itemhideu")
                  } else {
                     $(this).siblings(".item-num").addClass("itemhidew")
                  } 
                }

          }
      }
      }
  )

 $(".item-srstarttime").each(function () {
      var srowner=$(this).siblings(".item-srowner").text()
      var starttimecon=$(this).text()
      if (starttimecon !== ""){
          var starttime=Date.parse(new Date(starttimecon))/1000
          var d=new Date()
          var utc = d.getTime() + (d.getTimezoneOffset() * 60000)
          var offset=10
          var nd = new Date(utc + (3600000*offset))
          var currtime=Date.parse(nd)/1000
          var timediff=currtime - starttime
          var timediffw=2*60*60*24
          if ( parseInt(timediff) <= parseInt(timediffw)) {
        if (srowner == "" ){
            $(this).siblings(".item-num").addClass("itemhidek")
        } else {
            $(this).siblings(".item-num").addClass("itemhidew")
              }
          } else if ( parseInt(timediff) > parseInt(timediffw)){
        if (srowner == "" ){
                        $(this).siblings(".item-num").addClass("itemhidek")
                } else {
                        $(this).siblings(".item-num").addClass("itemhide")
                }
      }
      }
  })

  $(".item-instarttime").each(function () {
      var inowner=$(this).siblings(".item-inowner").text()
      var inprority=$(this).siblings(".item-inprority").text()
      var p1time=2*60*60
      var p1time12=60*60
      var p2time=4*60*60
      var p2time12=2*60*60
      var p3time=24*60*60
      var p3time23=16*60*60
      var p3time13=8*60*60
      var p4time=48*60*60
      var p4time34=36*60*60
      var p4time24=24*60*60
      var p4time14=12*60*60
      var starttimecon=$(this).text()
      if (starttimecon !== ""){
          var starttime=Date.parse(new Date(starttimecon))/1000
          var d=new Date()
          var utc = d.getTime() + (d.getTimezoneOffset() * 60000)
          var offset=8
          var nd = new Date(utc + (3600000*offset))
          var currtime=Date.parse(nd)/1000
          var timediff=currtime - starttime
          if (inprority == "1"){
              if (parseInt(timediff) >= parseInt(p1time)) {
                  $(this).siblings(".item-num").addClass("itemhide")
                } else if (parseInt(p1time12) < parseInt(timediff)){
                  if (parseInt(timediff) < parseInt(p1time)){
                     $(this).siblings(".item-num").addClass("itemhideu")
                   } 
                } else if (parseInt(timediff) < parseInt(p1time12)){
                  $(this).siblings(".item-num").addClass("itemhidew")
                }
           } else if (inprority == "2") {
               if (parseInt(timediff) >= parseInt(p2time)) {
                  $(this).siblings(".item-num").addClass("itemhide")
                } else if (parseInt(p2time12) < parseInt(timediff)){
                    if (parseInt(timediff) < parseInt(p2time)){
                       $(this).siblings(".item-num").addClass("itemhideu")
                     } 
                }else if (parseInt(timediff) < parseInt(p2time12)){
                  $(this).siblings(".item-num").addClass("itemhidew")
                }
           } else if (inprority == "3") {
               if (parseInt(timediff) >= parseInt(p3time)) {
                  $(this).siblings(".item-num").addClass("itemhide")
                } else if (parseInt(p3time23) < parseInt(timediff)){
                       if (parseInt(timediff) < parseInt(p3time)){
                         $(this).siblings(".item-num").addClass("itemhideu")
                       }
                } else if (parseInt(p3time13) < parseInt(timediff)){
                       if (parseInt(timediff) < parseInt(p3time23)){
                       $(this).siblings(".item-num").addClass("itemhidew")
                      }
                } else if (parseInt(p3time13) > parseInt(timediff)){
                  $(this).siblings(".item-num").addClass("itemgree")
                }
           } else if (inprority == "4") {
               if (parseInt(timediff) >= parseInt(p4time)) {
                  $(this).siblings(".item-num").addClass("itemhide")
                } else if (parseInt(p4time34) < parseInt(timediff)){
                       if (parseInt(timediff) < parseInt(p4time)){
                         $(this).siblings(".item-num").addClass("itemhideu")
                        }
                } else if (parseInt(p4time24) < parseInt(timediff)){
                       if (parseInt(timediff) < parseInt(p4time34)){
                             $(this).siblings(".item-num").addClass("itemhidew")
                       }  
                } else if (parseInt(p4time14) < parseInt(timediff)){
                     if (parseInt(timediff) < parseInt(p4time24)) {
                          $(this).siblings(".item-num").addClass("itemgree")
                     }
                } else if (parseInt(p4time14) > parseInt(timediff)){
                  $(this).siblings(".item-num").addClass("itemligree")
                } 
             }
               
      }
  })


  $(".item-prstarttime").each(function () {
      var prowner=$(this).siblings(".item-prowner").text()
      var starttimecon=$(this).text()
      if (starttimecon !== ""){
          var starttime=Date.parse(new Date(starttimecon))/1000
          var d=new Date()
          var utc = d.getTime() + (d.getTimezoneOffset() * 60000)
          var offset=10
          var nd = new Date(utc + (3600000*offset))
          var currtime=Date.parse(nd)/1000
          var timediff=currtime - starttime
          var timediffw=2*60*60*24
          if ( parseInt(timediff) <= parseInt(timediffw)) {
                if (prowner == "" ){
                        $(this).siblings(".item-num").addClass("itemhidek")
                } else {
                        $(this).siblings(".item-num").addClass("itemhidew")
                }
          } else if ( parseInt(timediff) > parseInt(timediffw)){
                if (prowner == "" ){
                        $(this).siblings(".item-num").addClass("itemhidek")
                } else {
                        $(this).siblings(".item-num").addClass("itemhide")
                }
          }
      }
  })


  $(".item-uatstarttime").each(function () {
      var uatstatus=$(this).siblings(".item-uatstatus").text()
      var starttimecon=$(this).text()
      if (starttimecon !== ""){
          var starttime=Date.parse(new Date(starttimecon))/1000
          var d=new Date()
          var utc = d.getTime() + (d.getTimezoneOffset() * 60000)
          var offset=10
          var nd = new Date(utc + (3600000*offset))
          var currtime=Date.parse(nd)/1000
          var timediff=currtime - starttime
          var timediffw=2*60*60*24
          if ( parseInt(timediff) <= parseInt(timediffw)) {
                if (uatstatus == "Pending" ){
                        $(this).siblings(".item-num").addClass("itemhidek")
                } else {
                        $(this).siblings(".item-num").addClass("itemhidew")
                }
          } else if ( parseInt(timediff) > parseInt(timediffw)){
                if (uatstatus == "Pending" ){
                        $(this).siblings(".item-num").addClass("itemhidek")
                } else {
                        $(this).siblings(".item-num").addClass("itemhide")
                }
          }
      }
  })

 

css:

# cat /static/myscript/mycss.css
        .itemhide{
            background-color: red;
        }
        .itemhidew{
            background-color: yellow;
        }
        .itemhideu{
            background-color: orange;
        }
        .itemhidek{
            background-color: chartreuse;
        }
        .itemgree{
            background-color: green;
        }
        .itemligree{
            background-color: lightgreen;
        }

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Ticket & Change</title>

    {% block header %}
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap4.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/static/dist/css/adminlte.min.css">
  <link href="/static/myscript/font.css" rel="stylesheet">

  <link rel="stylesheet" href="/static/myscript/mycss.css">

    {% endblock %}
</head>




<body class="hold-transition sidebar-mini">


 <div>
 .
 .
 .
 .
 .
 .
</div>

{% block js %}

<!-- jQuery -->
<script src="/static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="/static/plugins/datatables/jquery.dataTables.js"></script>
<script src="/static/plugins/datatables/dataTables.bootstrap4.js"></script>
<!-- SlimScroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!-- page script -->

<script>
  $(function () {
      $("#change").DataTable();
      $('#change1').DataTable({
          "paging": true,
          "lengthChange": true,
          "searching": true,
          "ordering": true,
          "info": true,
          "autoWidth": false
      });
  });
</script>
{% endblock %}

<script src="/static/myscript/myjs.js"></script>
</body>
</html>

 

weixin_888988
关注
专栏目录
js根据表格某项指标使整行显示不同的颜色
Yueqin0512的博客
07-13 1116
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table { width: 500px; margin: 100px auto; border: 2px gray solid; border-collapse: collapse; text-align: center; } td,th.
在JS中给单元格设置颜色
xkahala的专栏
06-02 1954
由于项目主样式限定不可给行设定样式，所以只能一个个单元格设置   .t1 {background-color:#ffff66}   //样式定义.t11 {background-color:#ffff99} var obj_Continued = document.all('oContinued_job');var d1 = document.all('text');   //获取单元格对...
js添加不同颜色的行练习
l2535460824的博客
06-13 936
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; function create() { var mtable=document.getElementByI
js实现根据字符串生成颜色
最新发布
楠姐的博客
02-04 704
但要注意这种方法生成的颜色是随机的，并没有任何的颜色学意义。如果你需要根据特定的颜色规则生成颜色（比如根据情感、温度或其他数据）则需要一个更复杂的算法。中，你可以根据给定的字符串生成一种颜色。这种操作通常需要将字符串转换为颜色代码，如。来工作，并将字符码累加到一个。每次对同一字符串调用。
使用js编程让表格隔列显示颜色，在点击任意一个单元格时让原有的所有列颜色消失，而单元格所在的一列全部显示出颜色
m0_59648875的博客
09-07 456
使用js编程让表格隔列显示颜色，在点击任意一个单元格时让原有的所有列颜色消失，而单元格所在的一列全部显示出颜色
javascript动态添加单元格的脚本代码
10-30
### JavaScript 动态添加单元格的关键技术点 在网页开发中，经常需要通过JavaScript来动态地改变HTML表格的内容。这不仅可以提升用户体验，还能使页面更加灵活。本文将深入解析如何利用`insertRow()`和`insertCell...
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
11-24
在这个`renderer`函数中，我们检查了`Content`字段的值，并根据条件设置了单元格的颜色。`metaData.style`用于指定单元格的CSS样式，`data-qtip`则用于设置单元格的提示信息。 总结起来，通过Sencha的GridPanel，...
js生成动态表格并为每个单元格添加单击事件的方法
10-26
本文介绍的使用JavaScript动态生成表格并为每个单元格添加单击事件的方法是Web开发中一项基础而重要的技能。通过这种方式，我们可以根据实时数据创建表格，并允许用户与表格中的数据进行交互。这不仅使页面变得更加...
Jquery DataTable 实现换行交替变色，实现根据单元格内容变换单元格背景颜色， 实现 01 替换成是否
u014393500的博客
12-16 681
Jquery DataTable心得
JavaScript改变表格单元格的背景颜色 - 支持多浏览器
04-28
在JavaScript中，改变表格（Table）单元格（TD）的背景颜色是一项常见的需求，尤其是在创建交互式网页时。本文将详细介绍如何使用JavaScript实现这一功能，并确保兼容多种浏览器，包括Chrome、Firefox、Safari、Edge...
JavaScript获取table中某一列的值的方法
10-25
主要介绍了JavaScript获取table中某一列的值的方法,需要的朋友可以参考下
JavaScript中的表格颜色控制
ITxiaobaibai的博客
07-20 2698
&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="first.aspx.cs" Inherits="first" %&gt; &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;he
GridView某行某列（单元格）根据某条件标色
m0_52390420的博客
03-30 977
一、背景   在开发中经常会遇到有需求根据某列上某些内容符合某些条件，在该行的某列（可以为自身，可以是所在行的某列）设置背景色以突出显示。网上查找的大多是判断某行某列然后直接在上面标注颜色，这里需要在其他地方标注，写下来以备后来人借鉴。 二、实现方法   在GridView的方法中有一个叫做CustomDrawCell，该方法是数据已绑定，而页面还在绘制过程中的方法，利用此方法可以根据内容在对应的单元格上标注颜色。详细代码如下： private void gvCwzl_CustomDrawCell(obje
如何用原生js给特定元素随机添加背景色
花神的博客
05-17 5719
每次做项目都是red,pink,blue,不仅单调乏味，而且充分暴露了自己三级甲等的英语水平，作为一名有理想，积极向上的程序员，这是果断不能忍的事情，今天刚好写一个用原生js给特定元素随机添加背景色的方法，瞬间让单调的生活丰富多彩起来，有了此方法妈妈再也不用担心我找不到女朋友了。源码：<!doctype html> <html lang="en"> <head> <meta charset=
table隔行变色与table单元格根据条件更改字体颜色
weixin_30622107的博客
07-27 471
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行变色</title> </head> <script> //表格隔行变色 function C...
帆软报表js给某个单元格添加背景色
Ordinary_T的博客
07-21 6519
$("td[id^=D7]").css('background-color','yellow');//给D7单元格增加背景色
JSF---->表格设置行的颜色
weixin_33858485的博客
01-14 168
表格中的一条数据很长为了不要看错上下两行，一般为使上下两行的数据背景颜色不一样来区别。在JSF中，如使用的是&lt;t:dataTable&gt;标签来显示数据。有属性rowClasses。对表格中行给予不同的css样式。如果css的样式名字是用逗号隔开的，会把不同的样式根据顺序给不同的行。如果样式少于行数，则样式会一直循环。如果样式多余行数，则多余的样式被忽略。 1、交替显示不同颜色 Sty...
table根据表格内的元素改变行颜色的javascript实现
热门推荐
柳汀轩
07-08 1万+
本例要实现的功能是根据表格第四列的数值划分的区间，分别赋予相应行以不同的颜色。 js<script type="text/javascript"> function co(){ var table = document.getElementById("tab"); var len = table.rows.length; var _row = tabl
js如何实现动态点击改变单元格颜色？
weixin_33878457的博客
05-28 2194
js如何实现动态点击改变单元格颜色？ 一、总结 1、通过table的rows属性，遍历表格所有行，然后通过cells属性，遍历每一行中的单元格。 2、遍历的过程中，动态的为每一个单元格定义单击事件，改变单元格的背景色     二、js如何实现动态点击改变单元格颜色？ 1、动态改变单元格背景色案例 实例描述： 单击单元格后改变其背景颜色,再次单击则恢复之前样式 案例要...
JavaScript实现鼠标悬停改变表格单元格颜色
函数内部通过`getElementsByTagName('td')`获取表格的所有单元格，然后遍历这些单元格，为每个单元格添加`onmouseover`和`onmouseout`事件监听器。 `onmouseover`事件触发时，单元格的背景色变为`#FEBD20`，边框...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值