javascript - 如何将 td 的文本颜色更改为红色

Question

我在我的 css 文件中定义了样式

我想在我的文本中应用这种样式

<tr>
    <td class="lalign"><span class="ceoName"></span><span class="ceoTitle" style="color: navy;text-align: center;"></span></td>
    <td><span class="ceoMondaySchedule"></span></td>
    <td><span class="ceoTuesdaySchedule"></span></td>
    <td><span class="ceoWednesdaySchedule"></span></td>
    <td><span class="ceoThursdaySchedule"></span></td>
    <td><span class="ceoFridaySchedule"></span></td>                
</tr>
<tr>
    <td class="lalign"><span class="cfoName"></span><span class="cfoTitle" style="color: navy;text-align: center;"></span></td>
    <td><span class="cfoMondaySchedule"></span></td>
    <td><span class="cfoTuesdaySchedule"></span></td>
    <td><span class="cfoWednesdaySchedule"></span></td>
    <td><span class="cfoThursdaySchedule"></span></td>
    <td><span class="cfoFridaySchedule"></span></td>                
</tr>
<tr>
    <td class="lalign"><span class="ctoName"></span><span class="ctoTitle" style="color: navy;text-align: center;"></span></td>
    <td><span class="ctoMondaySchedule"></span></td>
    <td><span class="ctoTuesdaySchedule"></span></td>
    <td><span class="ctoWednesdaySchedule"></span></td>
    <td><span class="ctoThursdaySchedule"></span></td>
    <td><span class="ctoFridaySchedule"></span></td>                
</tr>

说未设置时间表

<style type="text/css">
td.mytdclass {
  color: white;
  background-color: red;
}
</style>

否则我想用这个样式

<style>
td.mytdclass {
  color: black;
}
</style>

我在客户端使用 jQuery。

我会写

$('.ceoMondaySchedule').each(function(idx, obj) {
    var txt = $(this).text();
    console.log(txt);
    if (txt === "No Schedule Set" + "No Schedule Set") {
        $(this).css('color', 'red');
    } else {
        $(this).css('color', 'black');
    }
});

$('.ceoTuesdaySchedule').each(function(idx, obj) {
    var txt = $(this).text();
    console.log(txt);
    if (txt === "No Schedule Set" + "No Schedule Set") {
        $(this).css('color', 'red');
    } else {
        $(this).css('color', 'black');
    }
});

$('.ceoWednesdaySchedule').each(function(idx, obj) {
    var txt = $(this).text();
    console.log(txt);
    if (txt === "No Schedule Set" + "No Schedule Set") {
        $(this).css('color', 'red');
    } else {
        $(this).css('color', 'black');
    }
});

继续这样做 5 天，然后对 cfo 和 cto 做同样的事情

但是有更好的写法吗？

Answer 1

更新

在查看 OP 对代码的异常熟悉的编辑后，我更新了我同样熟悉的代码以响应后续问题:

"I could write,"

异常熟悉的代码

"and keep doing it for all 5 days then do the same for cfo then cto but is there a better way of writing this?"

是的，只需更改选择器即可。该更新具有属性特殊值选择器和标签选择器，前者非常具体，后者更通用。

• $('[class$="Schedule"]') Means: Any element that has a className ending with the string: "Schedule".

• $('td span') Means: Any span that's a child of a td.

我还添加了两个按钮来演示两个选择器的范围。

---

使用

• .each() 转到每个目标(即 .jobTitle)并执行一个函数

• .text() 查找目标中实际包含的文本(即No Schedule Set)

• .css() 更改目标的样式(即 color red)

片段

function targetSchedule() {
  $('[class$="Schedule"]').each(function(idx, obj) {
    var txt = $(this).text();
    if (txt === 'No Schedule Set') {
      $(this).css('color', 'red');
    } else {
      $(this).css('color', 'black');
    }
  });
}

function targetAllSpan() {
  $('td span').each(function(idx, obj) {
    var txt = $(this).text();
    if (txt === 'No Schedule Set') {
      $(this).css('text-decoration', 'underline');
    } else {
      $(this).css('font-size', 'smaller');
    }
  });
}

table {
  border: 1px solid grey;
}

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick='targetSchedule()'>Any className ending with "Schedule" and has the text "No Schedule Set" will have red text; anything else will have black text</button>
<button onclick='targetAllSpan()'>Any span that's a child of a td and has the text "No Schedule Set" will be underlined; anything else will have smaller text</button>
<table>
  <tr>
    <td class="lalign"><span class="ceoName">No Schedule Set</span><span class="ceoTitle" style="color: navy;text-align: center;">Schedule Set</span></td>
    <td><span class="ceoMondaySchedule">No Schedule Done</span></td>
    <td><span class="ceoTuesdaySchedule">Set Schedule No</span></td>
    <td><span class="ceoWednesdaySchedule">NoScheduleSet</span></td>
    <td><span class="ceoThursdaySchedule">No Schedule Set</span></td>
    <td><span class="ceoFridaySchedule">No Scedule Set</span></td>
  </tr>
  <tr>
    <td class="lalign"><span class="cfoName">No Schedule Set No</span><span class="cfoTitle" style="color: navy;text-align: center;">Schedule Set</span></td>
    <td><span class="cfoMondaySchedule">no schedule set</span></td>
    <td><span class="cfoTuesdaySchedule">No Schedule Set</span></td>
    <td><span class="cfoWednesdaySchedule">No</span></td>
    <td><span class="cfoThursdaySchedule">Schedule</span></td>
    <td><span class="cfoFridaySchedule">Set</span></td>
  </tr>
  <tr>
    <td class="lalign">Nope<span class="ctoName"></span><span class="ctoTitle" style="color: navy;text-align: center;">Set No Schedule</span></td>
    <td><span class="ctoMondaySchedule">没有设定时间表</span></td>
    <td><span class="ctoTuesdaySchedule">✦</span></td>
    <td><span class="ctoWednesdaySchedule">No Schedule Set</span></td>
    <td><span class="ctoThursdaySchedule">No Schedule Set</span></td>
    <td><span class="ctoFridaySchedule">💀</span></td>
  </tr>
</table>