Question

85

Change background color of table cells according to their header

rated 0 times [ 88] [ 3] / answers: 1 / hits: 23544 / 10 Years ago, fri, december 5, 2014, 12:00:00

I am dynamically constructing a calendar(html table) in javascript. I want to have the Saturday and Sunday columns with a gray background color.

When I'm adding the other cells to the calendar, I want to check for the cells column header, check it's inner html text/class/id and color the cell if it's on a weekend.

This is where I add the column headers with the starting letters of the days :

<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>

I tried this code, but it's not working properly...

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;

    }

}

So what I would like to achieve is just a little code snippet, that goes through a whole table element, and checks every cells header for it's innerhtml content or id and changes it's background color accordingly.

Later Edit :

Screenshot of the table :

enter

The thing is, that the table is constructed according to the month we are currently in, and we don't necessarily know the index of Saturday or Sunday. (in the picture, the 1st of December lands on Monday, so this is a pretty lucky situation)

The Saturdays and Sundays are not fixed in the table. The calendar starts with the 1st of the current month and then gets the day for it. I know it's a little odd, but this is how it was designed by somebody else, and I have to work with it.

The blue bars are marking a time interval, but that thing is already working.

The code where I'm constructing the whole table would be really long to make it understandable.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 10 Years ago brittanye · Accepted Answer

try this:

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

Note your loop was finishing a row early and should start from 1 (as 0 will be your header row)

UPDATE

Given your edit I have mocked up a similar table and think the following js should solve your problem:

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;

        }

    }

}

I have added comments to the fiddle example

This code is slightly better on performance as you wouldn't need to loop through as many cells:

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