Patrick Curran said:
I am looking to have the first column in the table at the link
below change the text colour and size on any row where the current date lies
within the date range in column two.
Can this be done with JavaScript? I would appreciate any tips
It can.
First, you should tidy the code of the table. In particular, you should
get rid of all the font tags, and use CSS instead. That will make it
much easier to work with from Javascript, and have the added bonus
of being modern, acceptable HTML.
You could also consider having the activity range in a more uniform
format. Now, the format is one of
Mth d - d
Mth - Mth
Mth d - Mth d
I had to add a parser for those. The complexity would be much lower
if they were always on the form
Mth d - Mth d
I recommend putting the head of the table into a <thead> tag and
the rest into a <tbody> tag.
Code:
---
var today = new Date();
var monthNum = {Jan : 0, Feb : 1, Mar : 2, Apr : 3, May : 4, Jun : 5,
Jul : 6, Aug : 7, Sep : 8, Oct : 9, Nov :10, Dec :11};
function checkDates(range) {
var test,mth1,mth2,day1,day2,date1,date2;
if (test = /^\s*(\w{3})\s+(\d+)\s*-\s*(\d+)\s*$/.exec(range)) {
mth1 = mth2 = monthNum[test[1]];
day1 = +test[2];
day2 = +test[3];
} else if (test = /^\s*(\w{3})\s*-\s*(\w{3})\s*$/.exec(range)) {
mth1 = monthNum[test[1]];
day1 = 1;
mth2 = monthNum[test[2]]+1;
day2 = -1;
} else if (test = /^\s*(\w{3})\s+(\d+)\s*-\s*(\w{3})\s+(\d+)\s*$/.exec(range)) {
mth1 = monthNum[test[1]];
day1 = +test[2];
mth2 = monthNum[test[3]];
day2 = +test[4];
} else {
return false;
}
var date1 = new Date(today.getFullYear(),mth1,day1);
var date2 = new Date(today.getFullYear(),mth2,day2+1);
return (date1 <= today && today < date2);
}
function getText(node) {
if (node.nodeType == 3) { return node.nodeValue; }
var acc="";
for (var chld = node.firstChild;chld != null;chld=chld.nextSibling) {
acc += getText(chld);
}
return acc.replace(/\s+/g," ");
}
function highlight(){
var tab = document.getElementById("tableId");//add id="tableId" to table tag
for(var i=0;i<tab.rows.length;i++) {
var row = tab.rows
;
var shower = row.cells[0];
var dates = row.cells[1];
if (checkDates(getText(dates))) {
shower.style.color = "red";
shower.style.fontSize = "110%";
} else {
shower.style.color = "";
shower.style.fontSize = "";
}
}
}
---
Add an id attribute to the table tag, and call "highlight()". Tested in
IE6, Mozilla FB 0.6 and Opera 7.2
It won't change text size on the current table, but that is because of
the font tags interfereing.
/L