根據標題更改表格單元格的背景顏色

Question

我在javascript中動態構建日曆（html表格）。我想讓週六和週日的專欄有灰色的背景色。

當我將其他單元格添加到日曆中時，我想檢查單元格列標題，檢查它是否爲內部html文本/類/ id，並在週末爲單元格着色。

這是我加的列標題與天起始字母：

<th bgcolor='#c1c1c1' width=20>S</th>" 
<th width=20>M</th>" 
<th width=20>T</th>" 
<th width=20>W</th>" 
<th width=20>T</th>" 
<th width=20>F</th>" 
<th bgcolor='#c1c1c1' width=20>S</th>" 

我嘗試這樣的代碼，但它不能正常工作...

var table = document.getElementById("calendarTable"); 
var rows = table.getElementsByTagName("tr"); 
for (var z = 0; z < rows.length-1; z++) { 
    for (var y = 0; y < rows[z].cells.length; y++) { 
     if(rows[z].cells[y].headers=="S") 
      rows[z].cells[y].style.backgroundColor = "#c1c1c1"; 
    } 
} 

所以我想要實現的只是一個小小的代碼片段，它貫穿整個表元素，並檢查每個單元格標題的innerhtml內容或id，並相應地更改其背景顏色。

後來編輯：

表的截圖：

的事情是，該表是根據一個月，我們目前正在建造的，我們不一定知道週六或週日的指數。 （在圖中，12月1日星期一登陸，所以這是一個相當幸運的情況）

週六和週日不固定在桌子上。日曆從當前月份的第一天開始，然後獲取該日期。我知道這有點奇怪，但這是其他人設計的方式，我必須使用它。

藍色條形標記時間間隔，但該東西已經在工作。

我構建整個表的代碼將會很長，以使其可以理解。

Answer 1

試試這個：

for (var z = 1; z < rows.length; z++) { 
     rows[z].cells[0].style.backgroundColor = "#c1c1c1"; // Sunday 
     rows[z].cells[6].style.backgroundColor = "#c1c1c1"; // Saturday 
} 

Example

注意你的循環被提早完成一排，應該從1（0將是您的標題行）

UPDATE

啓動

鑑於你的編輯我嘲笑了類似的表，並認爲下面的JS應該解決你的問題：

for (var z = 3; z < rows.length; z++) { 
    for (var a = 1; a < rows[z].cells.length; a++) { 
     if (rows[2].cells[a - 1].innerHTML == "S") { 
      rows[z].cells[a].style.backgroundColor = "#c1c1c1"; 
     } 
    } 
} 

我添加註釋到fiddle example

此代碼對性能稍微好一點，你會不會通過儘可能多的細胞需要循環：

var table = document.getElementById("calendarTable"); 
var rows = table.getElementsByTagName("tr"); 
var cellIndexes = []; 

for (var a = 0; a < rows[2].cells.length; a++) { 
    if (rows[2].cells[a].innerHTML == "S") { 
     cellIndexes.push(a + 1); 
    } 
} 

for (var z = 3; z < rows.length; z++) { 
    for (var i = 0; i < cellIndexes.length; i++) { 
     rows[z].cells[cellIndexes[i]].style.backgroundColor = "#c1c1c1"; 
    } 
} 

Example

Answer 2

我絕對不會鼓勵你使用JavaScript進行造型。相反，儘可能多地使用CSS來保持較高的性能和較低的腳本依賴性。

我假設你的表結構如下所示。我盡力從你的屏幕截圖重建：

<table data-start-day="sun"> 
    <thead> 
     <tr> 
      <th>Year</th> 
     </tr> 
     <tr> 
      <th rowspan="2">Month</th> 
      <th>1</th><!-- fill in --><th>31</th> 
     </tr> 
     <tr> 
      <th>S</th><th>M</th><!-- fill in --> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Employee</td> 
      <td></td><!-- x days in month --> 
     </tr> 
     <tr> 
      <td>Exceptions</td> 
      <td></td><!-- x days in month --> 
     </tr> 
    </tbody> 
</table> 

下一步，我們將使用一系列化合物的選擇是supported in IE 9 and up的。需要注意的主要動力是通過使用:nth-of-type，有了它我們可以針對週六/週日列無論身在何處，他們落在日曆本身：

table[data-start-day=sat] thead tr:last-child th:nth-of-type(7n-13), 
table[data-start-day=sat] thead tr:last-child th:nth-of-type(7n-12), 
table[data-start-day=sat] tbody tr:nth-of-type(2n) :nth-of-type(7n-12):not(:first-child), 
table[data-start-day=sat] tbody tr:nth-of-type(2n) :nth-of-type(7n-11):not(:first-child), 
table[data-start-day=fri] thead tr:last-child th:nth-of-type(7n-12), 
table[data-start-day=fri] thead tr:last-child th:nth-of-type(7n-11), 
table[data-start-day=fri] tbody tr:nth-of-type(2n) :nth-of-type(7n-11):not(:first-child), 
table[data-start-day=fri] tbody tr:nth-of-type(2n) :nth-of-type(7n-10):not(:first-child), 
table[data-start-day=thu] thead tr:last-child th:nth-of-type(7n-11), 
table[data-start-day=thu] thead tr:last-child th:nth-of-type(7n-10), 
table[data-start-day=thu] tbody tr:nth-of-type(2n) :nth-of-type(7n-10):not(:first-child), 
table[data-start-day=thu] tbody tr:nth-of-type(2n) :nth-of-type(7n-9):not(:first-child), 
table[data-start-day=wed] thead tr:last-child th:nth-of-type(7n-10), 
table[data-start-day=wed] thead tr:last-child th:nth-of-type(7n-9), 
table[data-start-day=wed] tbody tr:nth-of-type(2n) :nth-of-type(7n-9):not(:first-child), 
table[data-start-day=wed] tbody tr:nth-of-type(2n) :nth-of-type(7n-8):not(:first-child), 
table[data-start-day=tue] thead tr:last-child th:nth-of-type(7n-9), 
table[data-start-day=tue] thead tr:last-child th:nth-of-type(7n-8), 
table[data-start-day=tue] tbody tr:nth-of-type(2n) :nth-of-type(7n-8):not(:first-child), 
table[data-start-day=tue] tbody tr:nth-of-type(2n) :nth-of-type(7n-7):not(:first-child), 
table[data-start-day=mon] thead tr:last-child th:nth-of-type(7n-8), 
table[data-start-day=mon] thead tr:last-child th:nth-of-type(7n-7), 
table[data-start-day=mon] tbody tr:nth-of-type(2n) :nth-of-type(7n-7):not(:first-child), 
table[data-start-day=mon] tbody tr:nth-of-type(2n) :nth-of-type(7n-6):not(:first-child), 
table[data-start-day=sun] thead tr:last-child th:nth-of-type(7n-7), 
table[data-start-day=sun] thead tr:last-child th:nth-of-type(7n-6), 
table[data-start-day=sun] tbody tr:nth-of-type(2n) :nth-of-type(7n-6):not(:first-child), 
table[data-start-day=sun] tbody tr:nth-of-type(2n) :nth-of-type(7n-5):not(:first-child){ 
    background:#CCC; 
} 

結果符合您需要的輸出：

小提琴：http://jsfiddle.net/80fajvd6/4/

Answer 3

使用jQuery：

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 

<style type="text/css"> 
#calendarTable th {width: 20px} 

</style>  
</head> 
<body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


<table id="calendarTable"> 
<th>S</th> 
<th>M</th> 
<th>T</th> 
<th>W</th> 
<th>T</th> 
<th>F</th> 
<th>S</th> 
</table> 

<script type="text/javascript"> 

$("th:contains('S')").css("background-color", "#c1c1c1"); 



</script> 
</body> 
</html>