我有一个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>
答案 0 :(得分:0)
首先,您需要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>
答案 1 :(得分:0)
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>