Question

如何使用以下代码基于工作日的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;
            }

Answer 1

因此，您的ID为tdFri和tdFri2，并且您获得的数据为shiftDay = Fri和shiftNo = 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]}">

Angularjs根据数据库值动态突出显示td单元

1 个答案: