getElementById multiple Id's

[banning]

No. Change the id's to class. id can only be used once per page. Class can be used for multiple elements.

im not using Id thought im using name

[drhowarddrfine]

In your initial post you show using 'id' so I assumed you still were.

[banning]

In your initial post you show using 'id' so I assumed you still were.

nah i went ahead with pbmods solution

[CODE=html]

<td name="myName" ... >


<td name="myName" ... >
[/CODE]

[CODE=javascript]
var tds = document.getEle mentsByName('my Name');
for( var i = 0; i < tds.length; ++i )
{
tds[i].style.backgrou ndColor = 'annoyingly bright neon peach';
}
[/CODE]

[banning]

do this
[CODE=javascript]document.write( tds.length);[/CODE]

sometimes IE has a problem pulling names where the id's are the same.

the number it writes to the page should be > 0

see when i do this in IE it comes out as 0
but when i do it in FIREFOX it comes out as 41

[acoder]

see when i do this in IE it comes out as 0
but when i do it in FIREFOX it comes out as 41

I think that IE has problems with tds and getElementsByNa me. A bit of testing shows that it just doesn't work. Give your table an id and try: [CODE=javascript]document.getEle mentById('table ID').getElement sByTagName("td" );[/CODE]

[banning]

I think that IE has problems with tds and getElementsByNa me. A bit of testing shows that it just doesn't work. Give your table an id and try: [CODE=javascript]document.getEle mentById('table ID').getElement sByTagName("td" );[/CODE]

when i try that it turns the whole table the color... what im trying to accomplish is just turn an individual column one color. course you probably all ready know that but yea i tried it and it worked in firefox and ie like it should :)

[acoder]

when i try that it turns the whole table the color... what im trying to accomplish is just turn an individual column one color. course you probably all ready know that but yea i tried it and it worked in firefox and ie like it should :)

So have you got it working or not?

[banning]

So have you got it working or not?

no its not working... ie just sucks i guess... when i do what you posted it just turns the whole table a colour... i dont want that, i want to highlight just one column...

here is the site im using it on, http://doughxpress.com/staging/dryerDetailsElec?Wid=76

[iam_clint]

Heres a sample i made for you highlighting rows and cols without using names and works in firefox and ie. To use the code you will need to change your table accordingly.
[CODE=javascript]
<script>
vertColor="#66f fcc"
horzColor="#b7e fff";

function vertClick(col, tbl) {
var color="";
var table = document.getEle mentById(tbl);
var entireRow=table .getElementsByT agName("tr");
var curColor = entireRow[0].getElementsByT agName("td")[col].style.backgrou ndColor;
for (i=0; i<entireRow.len gth; i++) {
curEle = entireRow[i].getElementsByT agName("td")[col];
if (curEle.getAttr ibute("vert")== null || curEle.getAttri bute("vert")==" false") { curEle.setAttri bute("vert", "true"); color = vertColor; } else { curEle.setAttri bute("vert", "false"); color=""; }
if (color=="" && curEle.getAttri bute("horz")==" true") { curEle.style.ba ckgroundColor=h orzColor; } else { curEle.style.ba ckgroundColor=c olor; }
}
}

function horzClick(row, tbl) {
var color="";
var table = document.getEle mentById(tbl);
var entireRow=table .getElementsByT agName("tr")[row-1];
var tds = entireRow.getEl ementsByTagName ("td");
var curColor = tds[1].style.backgrou ndColor;
for (i=1; i<tds.length; i++) {
curEle = tds[i];
if (curEle.getAttr ibute("horz")== null || curEle.getAttri bute("horz")==" false") { curEle.setAttri bute("horz", "true"); color = horzColor; } else { curEle.setAttri bute("horz", "false"); color=""; }
if (curEle.getAttr ibute("vert")== "true") { curEle.style.ba ckgroundColor=v ertColor; } else { curEle.style.ba ckgroundColor = color; }
}
}
</script>
<STYLE>
tr { cursor: pointer; }
table { border-collapse: collapse; width: 100%; height: 100%;}
</STYLE>
<table border=1>
<tbody id="example">
<tr><td onclick="horzCl ick('1', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('2', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('3', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('4', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('5', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('6', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('7', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('8', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('9', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('10', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('11', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('12', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('13', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('14', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('15', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('16', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6

</tbody>
</table>
[/CODE]
This code should do exactly what you want in all browsers!

[iam_clint]

Code fixed for colspan checks

[CODE=javascript]
<script>
vertColor="#66f fcc"
horzColor="#b7e fff";

function vertClick(col, tbl) {
var color="";
var blnColSpan = false;
var table = document.getEle mentById(tbl);
var entireRow=table .getElementsByT agName("tr");
for (i=0; i<entireRow.len gth; i++) {
curEle = entireRow[i].getElementsByT agName("td")[col];
for (b=0; b<entireRow[i].getElementsByT agName("td").le ngth; b++) {
colspan = entireRow[i].getElementsByT agName("td")[b].getAttribute(" colspan");
if (colspan!=null && colspan!=1) { blnColSpan = true; }
}
if (!blnColSpan) {
if (typeof(curEle) =="object") {
if (curEle.getAttr ibute("vert")== null || curEle.getAttri bute("vert")==" false") { curEle.setAttri bute("vert", "true"); color = vertColor; } else { curEle.setAttri bute("vert", "false"); color=""; }
if (color=="" && curEle.getAttri bute("horz")==" true") { curEle.style.ba ckgroundColor=h orzColor; } else { curEle.style.ba ckgroundColor=c olor; }
}
}
blnColSpan = false;
}
}

function horzClick(row, tbl) {
var color="";
var table = document.getEle mentById(tbl);
var entireRow=table .getElementsByT agName("tr")[row-1];
var tds = entireRow.getEl ementsByTagName ("td");
for (i=1; i<tds.length; i++) {
curEle = tds[i];
if (curEle.getAttr ibute("horz")== null || curEle.getAttri bute("horz")==" false") { curEle.setAttri bute("horz", "true"); color = horzColor; } else { curEle.setAttri bute("horz", "false"); color=""; }
if (curEle.getAttr ibute("vert")== "true") { curEle.style.ba ckgroundColor=v ertColor; } else { curEle.style.ba ckgroundColor = color; }
}
}
</script>
[/CODE]

[iam_clint]

This is the same thing except theres an intersecting color.
[CODE=javascript]
<script>
/* Javascript written by iam_clint */
vertColor="#66f fcc";
horzColor="#b7e fff";
intersectColor= "#aa22f0";

function vertClick(col, tbl) {
var color="";
var blnColSpan = false;
var table = document.getEle mentById(tbl);
var entireRow=table .getElementsByT agName("tr");
for (i=0; i<entireRow.len gth; i++) {
curEle = entireRow[i].getElementsByT agName("td")[col];
for (b=0; b<entireRow[i].getElementsByT agName("td").le ngth; b++) {
colspan = entireRow[i].getElementsByT agName("td")[b].getAttribute(" colspan");
if (colspan!=null && colspan!=1) { blnColSpan = true; }
}
if (!blnColSpan) {
if (typeof(curEle) =="object") {
if (curEle.getAttr ibute("vert")== null || curEle.getAttri bute("vert")==" false") { curEle.setAttri bute("vert", "true"); color = vertColor; } else { curEle.setAttri bute("vert", "false"); color=""; }
if (curEle.getAttr ibute("horz")== "true" && curEle.getAttri bute("vert")==" true") { curEle.style.ba ckgroundColor=i ntersectColor; } else if (curEle.getAttr ibute("vert")== "false" && curEle.getAttri bute("horz")==" true") { curEle.style.ba ckgroundColor=h orzColor; } else { curEle.style.ba ckgroundColor=c olor; }
}
}
blnColSpan = false;
}
}

function horzClick(row, tbl) {
var color="";
var table = document.getEle mentById(tbl);
var entireRow=table .getElementsByT agName("tr")[row-1];
var tds = entireRow.getEl ementsByTagName ("td");
for (i=1; i<tds.length; i++) {
curEle = tds[i];
if (curEle.getAttr ibute("horz")== null || curEle.getAttri bute("horz")==" false") { curEle.setAttri bute("horz", "true"); color = horzColor; } else { curEle.setAttri bute("horz", "false"); color=""; }
if (curEle.getAttr ibute("vert")== "true" && curEle.getAttri bute("horz")==" true") { curEle.style.ba ckgroundColor=i ntersectColor; } else if (curEle.getAttr ibute("vert")== "true" && curEle.getAttri bute("horz")==" false") { curEle.style.ba ckgroundColor = vertColor; } else { curEle.style.ba ckgroundColor = color; }
}
}
</script>
<STYLE>
tr { cursor: pointer; }
table { border-collapse: collapse; width: 100%; height: 100%;}
</STYLE>
<table border=1>
<tbody id="example">
<tr><td onclick="horzCl ick('1', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('2', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('3', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('4', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('5', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('6', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('7', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('8', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('9', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('10', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('11', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('12', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('13', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('14', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('15', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6

</tbody>
</table>

[/CODE]

[banning]

This is the same thing except theres an intersecting color.

This is the answer too