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

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 日是星期一，所以这是一个非常幸运的情况）

周六和周日没有固定在表格中。日历从当月的 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，我们可以使用它来定位 Sat/Sun 列，无论它们位于日历本身的哪个位置：

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 2

尝试这个：

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

例子

请注意，您的循环提前完成了一行，应该从 1 开始（因为 0 将是您的标题行）

更新

鉴于您的编辑，我模拟了一个类似的表格，并认为以下 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";
        }
    }
}

我在小提琴示例中添加了评论

此代码在性能上稍好一些，因为您不需要遍历尽可能多的单元格：

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";
    }
}

例子

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>