迭代表并根据跨度值更改td背景颜色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了迭代表并根据跨度值更改td背景颜色相关的知识,希望对你有一定的参考价值。

我有一个从数据库中获取的值的datatable,我想根据span中的值更改td背景颜色。就像它的0 td颜色是绿色其他td颜色是红色enter image description here

这是我在td中添加值的代码

<td>
    <center>
        <span>CR303</span><br>
        <span ng-repeat="value in classrooms">
            <span ng-if="value.classroom_name=='CR303'">{{value.Schedules}}</span>
        </span>
    </center>
</td>
答案

首先,你需要iterate td然后获取span文本,现在你可以确定并使用if条件。

setInterval(function() {
  $('td').each(function() {
    var val = $(this).find('.myval').text();
    if (val > 0) {
  $(this).removeClass("tdRed").addClass('tdGreen');
} else if(val == '0') {
    $(this).removeClass("tdGreen").addClass('tdRed');
} else if(val =='') {
    $(this).removeClass("tdGreen").removeClass('tdRed');
}
  });
}, 1000);
.tdRed {
  color: red;
}

.tdGreen {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <center>
        <span>CR303</span><br>
        <span ng-repeat="value in classrooms">
<span ng-if="value.classroom_name=='CR303'" class="myval">0</span>
        </span>
      </center>
    </td>

    <td>
      <center>
        <span>CR304</span><br>
        <span ng-repeat="value in classrooms">
<span ng-if="value.classroom_name=='CR303'" class="myval">1</span>
        </span>
      </center>
    </td>

    <td>
      <center>
        <span>CR305</span><br>
        <span ng-repeat="value in classrooms">
<span ng-if="value.classroom_name=='CR303'" class="myval">22</span>
        </span>
      </center>
    </td>

    <td>
      <center>
        <span>CR306</span><br>
        <span ng-repeat="value in classrooms">
<span ng-if="value.classroom_name=='CR303'" class="myval">5</span>
        </span>
      </center>
    </td>

    <td>
      <center>
        <span>CR3011</span><br>
        <span ng-repeat="value in classrooms">
<span ng-if="value.classroom_name=='CR303'" >56</span>
        </span>
      </center>
    </td>
  </tr>
</table>
另一答案

var app = angular.module("Profile", []);
app.controller("ProfileCtrl", function($scope) {
  $scope.JSON_value = [
    [{
      'classroom_name': 'CR303',
      'Schedules': 0
    }, {
      'classroom_name': 'CR303',
      'Schedules': 1
    }, {
      'classroom_name': 'CR303',
      'Schedules': 2
    }],
    [{
      'classroom_name': 'CR303',
      'Schedules': 1
    }, {
      'classroom_name': 'CR303',
      'Schedules': 1
    }, {
      'classroom_name': 'CR303',
      'Schedules': 2
    }],
    [{
      'classroom_name': 'CR303',
      'Schedules': 1
    }, {
      'classroom_name': 'CR303',
      'Schedules': 1
    }, {
      'classroom_name': 'CR303',
      'Schedules': 2
    }],
    [{
      'classroom_name': 'CR303',
      'Schedules': 0
    }, {
      'classroom_name': 'CR303',
      'Schedules': 1
    }, {
      'classroom_name': 'CR303',
      'Schedules': 2
    }],
    [{
      'classroom_name': 'CR303',
      'Schedules': 0
    }, {
      'classroom_name': 'CR303',
      'Schedules': 1
    }, {
      'classroom_name': 'CR303',
      'Schedules': 2
    }],
    [{
      'classroom_name': 'CR303',
      'Schedules': 1
    }, {
      'classroom_name': 'CR303',
      'Schedules': 1
    }, {
      'classroom_name': 'CR303',
      'Schedules': 2
    }]
  ]
})
table tbody tr td.Color_red {
  color: red;
}

table tbody tr td.Color_green {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="Profile" ng-controller="ProfileCtrl">
  <table class="table" border="1">
    <tbody>
      <tr>
        <td ng-repeat="classrooms in  JSON_value track by $index" ng-class="{'Color_red': classrooms[0]['Schedules'] !=  0 ,'Color_green':classrooms[0]['Schedules'] ==  0}">
          <span>CR303</span><br>
          <span ng-repeat="value in classrooms track by $index">
                                                        <span ng-if="value.classroom_name=='CR303'">{{value.Schedules}}</span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</body>

以上是关于迭代表并根据跨度值更改td背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

如何用js更改tr的背景颜色 新手求助

HTML 和 CSS - 根据值更改单元格的文本颜色

AlertDialog 更改片段中的背景颜色 [重复]

如何根据显示找到输入值:jquery中的块

使用 CSS,如何根据我悬停的单元格更改表格行的背景颜色?

如何从片段更改 Tablayout 的背景颜色?