Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can you change <TD> attributes with JavaScript?

Status
Not open for further replies.

bgreenhouse

Technical User
Feb 20, 2000
231
CA
Me again :)

I have made a pop-up menu using a table within a span tag that is invisible until one rollsover the &quot;button&quot; that the menu pops up from. It works well, but because of the use of the layers, the popup menu lies overtop of the rest of the navbar. I put in an empty cell in the table to try and fix this. When I manually set the <td height= to zero, it looks great, and when I manually set it to 148 (the height of the pop up menu), it works well to. What I want to do is have the function that changes the popup menu to visible also change the height of that empty cell, so that the rest of the navbar gets &quot;pushed down&quot; so to speak. I have tried naming the <td> tag (i.e. <td name=&quot;sizercell&quot; height=&quot;0&quot;>) then trying to change the height attribute (document.navbar.sizercell.height = 148 - navbar being the name of the table), but it doesn't work. I can't find any reference in any of my books on whther this can be done or not...

Any suggestions?

Ben
 
I have had a brief go at this, and yes you can,the main problem is trying to address the cell, try something like the following:

<script>
function cellChange(){
document.all['cell'].style.width=&quot;1000&quot;
document.all['cell'].style.height=&quot;1000&quot;

</script>

...
<td height=&quot;200&quot; id=&quot;cell&quot; style=&quot;width:100;height:100&quot;>
...
<input type=&quot;button&quot; onClick=&quot;cellChange()&quot;>
<!-- input just to indicate remote function triggering -->


See if that works anyway.I have had trouble making these work in NN4 (surprise surprise).You could do the same thing with a mouseOver, and change the actual td attributes, but I have yet to find a way to address those, as you have tried.

-Ben &quot;Alright whatever man, I'll hook up the hair, but I aint touchin the ring though...Cause I'm still a pla--yer&quot;
 
Ben,

In IE table cells are addressed like this:

<table id=&quot;foo&quot;>
.....
</table>

<script ...>
// set the 4th columns 3rd row cell background color to black
document.all(&quot;foo&quot;).rows( 2).cells(3).bgcolor = &quot;#000000&quot;;
</script>

I have no idea how to address table cells in the Nasty browser.

-pete
 
Yes, but you try setting the td attributes directly, as in:

<td width=&quot;100&quot;...

using elemId.width.. doesn't work and I'm not sure why. &quot;Alright whatever man, I'll hook up the hair, but I aint touchin the ring though...Cause I'm still a pla--yer&quot;
 
> using elemId.width.. doesn't work

Well, are you sure it doesn't work? I mean you can set the attribute in your HTML code and it may not set the width of the cell depending on other related HTML.

<table border=1>
<tr><td width=100>1,A</td><td width=100>1,B</td></tr>
<tr><td width=50>2,A</td><td width=100>2,B</td></tr>
<tr><td width=100>3,A</td><td width=100>3,B</td></tr>
</table>

Setting the second row first column's TD width attribute will have no effect on the display of the table.

-pete
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top