根据标题更改表格单元格的背景颜色

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>