Iterate through table and change td background color based on span value
Question
I have a datatable that values fetched from database, I want to change td background color based on value in span. Like if its 0 td color is green else td color is red
This is my code for adding values in 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>
2 answers
solution1
0 ACCPTED 2017-12-19 06:39:52
First of all, you need to iterate td then get span text, now you can determine and use if condition.
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>
solution2
0 2017-12-19 08:19:37
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
change td background color based on the option value
How to target a table based on ID, in order to iterate through its td-spans, and change spans color aswell as give out its value to console
Change table row background color based on td content
Change color of the td cell based on the value in database
Change text color based on td value
Change td background colour based on the value
How to change background and font color of td element based on a value using vanilla javascript
How can I change td background color depending on value in a table using JavaScript / jQuery?
Using javascript to change table cell background color based on json value
Change background color of a table cell based on its value(Imported by XML)
Related Tags