Dynamic Table

**Lasse Reichstein Nielsen** · Jul 20 '05, 09:49 AM

Re: Dynamic Table

"Patrick Curran" <pkcurran@iol.i e> writes:
[color=blue]
> 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[/color]

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
[color=blue]
> The page is located at: http://www.iol.ie/~pkcurran/meteor.htm[/color]

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(rang e) {
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.getF ullYear(),mth1, day1);
var date2 = new Date(today.getF ullYear(),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.getEle mentById("table Id");//add id="tableId" to table tag
for(var i=0;i<tab.rows. length;i++) {
var row = tab.rows[i];
var shower = row.cells[0];
var dates = row.cells[1];
if (checkDates(get Text(dates))) {
shower.style.co lor = "red";
shower.style.fo ntSize = "110%";
} else {
shower.style.co lor = "";
shower.style.fo ntSize = "";
}
}
}
---
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
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

Dynamic Table

Dynamic Table

Comment