how do i reference a specific cell in a table

hughman

06-03-2003, 12:37 PM

i have a call <BODY onLoad=changeColor()>

a table definition

<TABLE name="table1">
<TR name="row1">
<TD name="cell1">rah rah</TD>
</TR>
</TABLE>

the function changeColor starts a timer and then every ten seconds i want to change the background color using the reference

table1.row1.cell1.bgcolor="blue";

i have also tried

table1.row1.cell1.style.bgcolor="blue";

i keep getting table1.row1.cell1 is null or not an object

i would also like to change the color of a font
<FONT name="font1"> while i am at it

any help greatly appreciated

Thanks

hughman

Garadon

06-03-2003, 01:22 PM

try

document.all.table1.row1.cell1

Kor

06-03-2003, 03:02 PM

try using "id" instead of "name" so you can use the getElementById method. (for IE6> and NS6>)

function objectSetup() {
zcell1 = new layerSetup("cell1","blue");
function layerSetup(id,color) {
this.obj = document.getElementById(id).style;
this.obj.bgColor = bgcolor;
return this.obj;
}

iar in <body onload=objectSetup()>

and the table shoul look like:
<TABLE>
<TR>
<TD id="cell1">rah rah</TD>
</TR>
</TABLE>

Now you can create a change function such as

function change() {
zcell1.bgcolor = "red";
}

... and start it with an event, whichever.

Furthermore, u can make it cross-browser, something like:

//a browser detect such as:
function Este() {
agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3));
this.ns3 = (this.ns && (this.major == 3));
this.ns4b = (this.ns && (this.major == 4) && (this.minor <= 4.03));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") == -1));
this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") != -1));
this.ie55 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.5") != -1));
this.ie6 = (this.ie && (agent.indexOf("msie 6.0")!=-1) );

}
var este = new Este();

//than the two setup functions, cross-browsered this time:

function objectSetup() {
zcell1 = new layerSetup("cell1","blue");
function layerSetup(id,color) {
if (este.ie5||este.ie55||este.ie6||este.ns6){
this.obj = document.getElementById(id).style;
this.obj.bgColor = bgcolor;
return this.obj;
} else if(este.ie4) {
this.obj = document.all[id].style;
this.obj.bgColor = bgcolor;
return this.obj;
} else if(este.ns4) {
this.obj = document.layers[id];
this.obj.bgColor = bgcolor;
return this.obj;
}
}

You can now play with that color building new functions which can change it whenever a event. You may insert all the style's atributes, such as position (doing even moving functions) or visibility.

Kor

06-03-2003, 03:09 PM

i forgot to close the } function
so that will be

function objectSetup() {
zcell1 = new layerSetup("cell1","blue");
}

hughman

06-03-2003, 03:30 PM

Thank you both for your help

I did end up using id instead of name

I passed the id to the method and then referenced it using

document.all[id].bgColor=color;

this worked straight away and has saved the rest of my hair from being pulled

I will mess around for a while and try to understand your solution Kor as it is probably a better way than mine

Thanks

hughman

Kor

06-03-2003, 03:41 PM

ok... i've send u the entire cross-browser solution, becouse u can use document.all[id] only for IE, but not for NS who recognize document.layers[id].

hughman

06-06-2003, 06:54 AM

Hi Kor

couldn't I simplify your browser identification code to something like

if ((agent.indexOf('msie')!=-1)
//identify type of internet explorer
else
//identify type of netscape or other

Thanks Hugh

Kor

06-06-2003, 09:32 AM

Well, I think that there are 3 types of browsers to detect (to use that kind of script properly).

1. Those who use document.GetElementBy(id).style (IE5, IE5.5, IE6, NS6, NS7)

2. document.all(id)style (IE4)

3. documnet.layers[id] (NS4)

So it is not enough to split the detection in two, the IE and others. Of course, the detector above is a complete one, but if u wanna have the minimum detector u have to have those 3 posibilities in mind, i suppose...

brothercake

06-06-2003, 10:54 AM

Only 1 is worth working with - forget document.all and document.layers - they're legacy collections for legacy browsers that you don't need to support anymore.

So all you'd need is a simple object test:

if(typeof document.getElementById != "undefined")
{

... code

}

Kor

06-06-2003, 11:18 AM

:thumbsup:

Absolute correct

...and add something like

if(typeof document.getElementById != "undefined")
{

... code

}

else if (typeof document.getElementById = "undefined"){
window.open('http://www.codingforums.com/');
}

:D

brothercake

06-06-2003, 12:36 PM

Originally posted by Kor
else if (typeof document.getElementById == "undefined"){

RadarBob

06-06-2003, 10:01 PM

Let's confuse the issue. Feel free to correct as necessary...

in *DYNAMIC HTML* the following reference is not valid:

document.tableName.RowName.CellName

because there is no object relationship here.

However in the *DOCUMENT OBJECT MODEL* there is. BUT... instead of referecing the name, you reference the id

ONE MORE THING:
In the DOM model for tables there is a tag between <table> and the <tr> tags. Its called <TBODY>. And it's there whether you explicitly code it in HTML or not. But when you do DOM referencing you must account for it. So I guess the best thing to do is explicity put it in and give it an ID too..

<table name="whocares" id="kitchenTable">
<TBODY id="tableRowSet">
<tr name="whocares id="headOf">
<td name="whocares id="DadsSeat">
</td>
</tr>

</tbody>
</table>

Now this should be legal:
document.kitchenTable.tableRowSet.headOf.DadsSeat

Am I wrong here?

Kor

06-07-2003, 08:33 AM

Yea... but there might be a question here:

Why use:
document.kitchenTable.tableRowSet.headOf.DadsSeat

....when I suppose it is perfect legally to use

document.GetElementById('DadsSeat')

reference?

I mean... if u can reference any object by his id, why have to specify the whole tree reference? Is it a difference? Is it of some help?

RadarBob

06-09-2003, 01:40 PM

Why use:
document.kitchenTable.tableRowSet.headOf.DadsSeat

....when I suppose it is perfect legally to use

document.GetElementById('DadsSeat')

reference?
Indeed. Why not. If you know the element id then get it, clean and simple. But when you need to traverse a table, you have to know this stuff.

Garadon

06-09-2003, 04:09 PM

well if a document is built up as a tree then this:
document.kitchenTable.tableRowSet.headOf.DadsSeat

would in theory run faster than this.

document.GetElementById('DadsSeat')

cause the first on follows the direct route from the trunk of the tree to the end leaf, where as the later in essense must check all the leafs on the tree for the rigth leaf.

of course that is only if they have made the element as a tree setup :)

brothercake

06-09-2003, 04:35 PM

The discussion is a moot point.

Both this:

document.tableName

and this:

document.tableId

are invalid - they are proprietary shortcut syntax which you should not rely on. In the former case you have

document.getElementsByName("tableName")

which may be a single element or a collection, and in the latter case you have

document.getElementById("tableId")

which can only be a single element. Which ever you choose, you must always specify a collection - do not leave it to the interpretor to work it out for you.

RadarBob

06-09-2003, 06:17 PM

of course that is only if they have made the element as a tree setup
Not sure who "they" are... But every HTML page is automagically a tree when using the DOM. Don't have to do a thing - just reference it.

Garadon

06-09-2003, 07:38 PM

they are a referal to who made ur browsers 'Netscape, Microsoft,etc...'

RadarBob

06-09-2003, 07:56 PM

Originally posted by Garadon
they are a referal to who made ur browsers 'Netscape, Microsoft,etc...'

O I C.

The tree thing is standard DOM. There are some propritary things in IE (and NS I assume).

hughman

06-10-2003, 08:26 AM

SpiritualStorms

10-29-2004, 02:48 AM

I found this thread through the search box, and i thought i'd use it to expand upon a previous question.

Saying then all that has been said on this thread, what does one think of the following:
______________________________________________________________

You know, i thought i had figured things out a bit, but then i try to run things, the desired results arent met. I was studying like 2 totally different scripts, just to see if i could figure out basically what i needed to, and from it, i tried what i thought was gonna give me my result, but to no avail.

Here's the first script:

function totalTags(){
var htmltags = "";
for ( i=0; i < document.all.length; i++) {
htmltags += document.all[i].tagName + "\n";
}
alert(htmltags);
}

The above works well, but with one flaw, and that is, that it lists all the TD names in a vertical line, and well, there's only so much room on the screenthat a great deal of the alert window itself ends up disappearing from view. I will assume that i will need to throw in a few if-statements to control layout, or to give formatting. But that's another issue.

The main issue is that the above actually works, whereas the following does not:

var field = new Array();

function numberCells() {

var theTable=document.all.oTable;

for( i = 0; i < theTable.rows.length;i++){
field[i]=theTable.rows.length;
for(j=0;j< theTable.rows(i).cells.length; j ++) {
field[i][j]=theTable.cells(j).length;
}
}
alert(field[i][j].length)
}

When i try to run the above, it tells me that field[] is null, and not an object.

I dont know what gives.
_______________________________________________________________

I know the above was posted else where, but i am still waiting on its fix.

Kor

10-29-2004, 08:40 AM

here is what i meant Kor

And I meant only that most of the time a method detector is by far easier and better than a browserType detector. And you may combine it with a setObject function to have objects and objects attributes as global variable for later dynamic use:

<script language="JavaScript" type="text/JavaScript">
function setObj(id,bgCol,color){
if(document.getElementById){
this.obj = document.getElementById(id);
this.obj.bgCol=document.getElementById(id).style.backgroundColor;
this.obj.fontCol=document.getElementById(id).style.color;
}
else if(document.all){
this.obj = document.all[id];
this.obj.bgCol=document.all[id].style.backgroundColor;
this.obj.fontCol=document.all[id].style.color;
}
else if(document.layers){
this.obj = document.layers[id];
this.obj.bgCol=document.layers[id].bgColor;
this.obj.fontCol=document.layers[id].color;
}
return this.obj;
}
function setUp(){
oCell1= new setObj('hdg_cell1','white','red')
}
onload = setUp;
//... some code here

//now you have 3 objects as global variables whom you may play with
//oCell1
//oCell1.bgCol
//oCell1.fontCol
</script>

now you have 3 objects as global variables whom you may play with

oCell1
oCell1.bgCol
oCell1.fontCol

in quite a safe cross-browser mode...