迭代表并根据跨度值更改td背景颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了迭代表并根据跨度值更改td背景颜色相关的知识，希望对你有一定的参考价值。
我有一个从数据库中获取的值的datatable，我想根据span中的值更改td背景颜色。就像它的0 td颜色是绿色其他td颜色是红色
这是我在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背景颜色的主要内容，如果未能解决你的问题，请参考以下文章