动态给表格数据修改颜色

效果图:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>

<body>

<table class="layui-table" lay-even lay-skin="nob" id="table1">

   <tr v-for="subPoint in point.newDatas" style="border-bottom:2px solid rgba(5, 19, 48, 1);">

  <td v-if="tem.pointId == subPoint.pointId && subPoint.chart=='volBar' " width="50%" style="background-color: rgba(158,    172, 198, 0.2);text-align:left;padding-left: 30px" name="description">

            <img src="../../statics/img/2.png" alt="">{{subPoint.description}}

        </td>

        <td v-if="tem.pointId == subPoint.pointId && subPoint.chart=='volBar' " style="background-color: rgba(158, 172, 198, 0.13);">

            <span @click="viewPresentData(subPoint.sensorCode,'0');" style="cursor: pointer;" name="value">{{subPoint.value}}</span>

        </td>

  </tr>

</table>

</body>

<script>

//页面颜色加载

var val = document.getElementsByName("description");

var n = document.getElementsByName("value");

for (var y = 0; y < val.length; y++) {

    if (val[y].innerText.indexOf('A') != -1 || val[y].innerText.indexOf('Uab') != -1) {

        n[y].style.color = "#C2BF3A";

    } else if (val[y].innerText.indexOf('B') != -1 || val[y].innerText.indexOf('Ubc') != -1) {

        n[y].style.color = "#5CBD30";

    } else if (val[y].innerText.indexOf('C') != -1 || val[y].innerText.indexOf('Uca') != -1) {

        n[y].style.color = "#8E3C3E";

    }

}

</script>

</html>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值