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

Question

我正在 javascript 中动态构建日历（html 表）。我想要带有灰色背景颜色的周六和周日列。

当我将其他单元格添加到日历时，我想检查单元格列标题，检查它的内部 html text/class/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

我绝对不会鼓励您使用 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>

接下来，我们将使用IE 9 及更高版本支持的一系列复合选择器。请注意，主要功能是通过使用: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/