0

如何使用以下代码根据工作日的 DB 值和班次号动态突出显示 TD 单元格。

能够使用函数 getDates() 显示工作日和日期。绑定到 TD 单元后作为 $scope.dates = getDates();

例如，如果下面的函数 getCurrentShiftDtls 返回 weekday = fri 和 shift no = 2 那么我想突出显示（更改 Bg 颜色）

<td colspan="3" id="tdFri"> and <td id="tdFri2">B</td>

我怎样才能做到这一点

code:

function getCurrentShiftDtls(PlId, A_Id) {
  $http({
    method: 'GET',
    url: 'http://xxx/api/Shift/GetShiftDtls',
    params: {
      PlId: PlId,
      A_Id: A_Id
    },
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
      'dataType': 'json'
    }
  }).then(function successCallback(response) {
    var ShiftDtls = response.data;
    shiftDay = ShiftDtls[0].WeekDay; // shiftDay = Fri
    shiftNo = ShiftDtls[0].ShiftNo; // shiftNo = 2
  }, function errorCallback(response) {
    // alert(response);
  });
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <table class="tbWeek">
      <tbody>
        <tr>
          <td colspan="3" id="tdMon">{{dates[0]}}</td> // Mon 3/25
          <td colspan="3" id="tdTue">{{dates[1]}}</td> // Tue 3/26 .. ..
<td colspan="3" id="tdFri" ng-class="{'highlight': shiftDay === 'Fri'} ">{{dates[4]}}</td>
          <td colspan="3" id="tdSun">{{dates[6]}}</td> // Sun 3/31
        </tr>
        <tr>
          <td id="tdMon1">A</td>
          <td id="tdMon2">B</td>
          <td id="tdMon3">C</td>
          ... ...
          <td id="tdSun1">A</td>
          <td id="tdSun2">B</td>
          <td id="tdSun3">C</td>
        </tr>
      </tbody>
    </table>

     <style>
    .highlight {
                background: red;
            }
4

1 回答 1

0

所以你有一个 IDtdFri和tdFri2，你得到的数据是shiftDay = FriandshiftNo = 2

在我看来，您只需将这些组合起来并制作一些字符串来按 ID 选择元素。

var selectors = '#td' + shiftDay + ', #td' + shiftDay + shiftNo;  //'#tdFri, #tdFri2'
var elements = document.querySelectorAll(selectors);
elements.forEach(function(el) {
    el.classList.add('highlighted');
});

.highlighted {
    background: yellow;
}

或者也许更好的“angularJS”方法是将这些值放入角度范围，然后在模板中添加一个类

<td colspan="3" id="tdFri" ng-class="{'highlight': shiftDay ==='Fri'}">
or maybe
<td colspan="3" id="tdFri" ng-class="{'highlight': shiftDay === date[4]}">
于 2019-03-29T12:41:54.867 回答