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

问题描述 投票：0回答：2

我有一个从数据库中获取的值的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>
javascript jquery angularjs-directive
2个回答
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>
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.