如何改變TD的文字顏色爲紅色

我想申請這種風格，如果在我的

<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

但有沒有寫這更好的辦法？

來源

2017-02-16 software is fun

的[應用CSS樣式跨越基於內容標籤]可能的複製（http://stackoverflow.com/questions/31207051/apply-css-style-to-span-tag-based-on-content ） – coreyward

我們如何知道是否設定了時間表？ – Dekel

您的CSS中不能有'td.mytdclass'兩種不同的樣式。 – Barmar

UPDATE

審查OP的代碼奇怪的熟悉的編輯後，我更新了我同樣熟悉的代碼響應跟進的問題：

「我能寫出」

奇怪的是熟悉的代碼

「繼續做它的所有5個天，然後做那麼CFO CTO相同的，但在那裏寫這更好的辦法？」

是的，只是改變選擇器。該更新具有屬性特殊值選擇器和標籤選擇器，前者非常具體，後者更通用。

$('[class$="Schedule"]')意思是：「時間表」：有一個類名結束與字符串中的任何元素。

$('td span')意思是：任何跨度是td的孩子。

我還添加了兩個按鈕來演示兩個選擇器的範圍內。

使用

.each()要到每個目標（即.jobTitle）和執行功能
.text()要查找實際上是一個目標（即No Schedule Set）
.css()要改變目標的樣式（即colorred）

代碼片段裏面有什麼文本

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>

來源

2017-02-16 01:01:12 zer00ne

您可以使用jQuery做到這一點：包括（）選擇。這將選擇「包含」指定字符串的所有元素。

$("td span.jobTitle:contains('No Schedule Set')").css({ 
    backgroundColor: "red", 
    color: "white" 
})

來源

2017-02-16 01:12:23 Jmorel88

我更新了我的問題 –

我做了類似的事情，但是當我更改輸入值和數據更改時，未設置日程安排時應用的CSS不會被刪除。 –

如何改變TD的文字顏色爲紅色

回答

相關問題