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

所以我想要实现的只是一个小代码片段，它通过一个完整的表元素，并检查每个单元格标题的内部HTML内容或id并相应地更改它的背景颜色。

稍后编辑：

表格截图：

enter image description here

问题是，该表是根据我们当前所在的月份构建的，我们不一定知道星期六或星期日的索引。（图中，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>

接下来，我们将使用supported in IE 9 and up的一系列复合选择器。请注意，主要功能是使用: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;
}

结果符合您想要的输出：

enter image description here

小提琴：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
}

Example

注意你的循环提前完成一行，应该从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";
        }
    }
}

我已将评论添加到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 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>

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

3 个答案: