根据标题更改表格单元格的背景颜色
我在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日星期一登陆,所以这是一个相当幸运的情况)
周六和周日不固定在桌子上。日历从当前月份的第一天开始,然后获取该日期。我知道这有点奇怪,但这是其他人设计的方式,我必须使用它。
蓝色条形标记时间间隔,但该东西已经在工作。
我构建整个表的代码将会很长,以使其可以理解。
试试这个:
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将是您的标题行)
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";
}
}
非常感谢!真棒回答 – Laureant 2014-12-05 13:16:48
我绝对不会鼓励你使用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;
}
结果符合您需要的输出:
尽管我同意,但我并没有意识到['
@DavidThomas在这段时间内,我经常在这个行业看到太多的知识和经验,变得“过时”:) – Sampson 2014-12-05 09:01:59
谢谢你的回复,但是我不得不编辑原文,因为我很匆忙,忘了提及一件小事:星期六和星期日不固定在桌子上。日历从当前月份的第一天开始,然后获取该日期。我知道这有点奇怪,但这是其他人设计的方式,我必须使用它。 – Laureant 2014-12-05 09:35:58
使用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>
我想为整个列着色,而不仅仅是标题。这只是标题的颜色。标题已经着色,正如你可以在我的第一篇文章中看到的。 – Laureant 2014-12-05 09:29:57
请问您可以为您创建表格的位置添加代码。在我看来,指派一个类创建可能比在所有元素中循环并在表填充之后执行它更简单。 – Zaphod 2014-12-05 08:48:16
您能否包含表格的完整呈现html - 看起来好像在您的日期标题开始前有两行 – Pete 2014-12-05 09:33:09
是的,第一行是年份(2014)第二行是月份(12月份的行跨度为2),第三行包含日期(显然总是以1开头),第四行是日期标题。 – Laureant 2014-12-05 09:45:22