Changing a td within a CSS class via javascript

Question

It's a fact; I just about "get by" using CSS and Javascript, and can usually find a solution to a problem ... but this has me stumped.

I have set up classes as this ...

 .pop_close{ outer table data here}
 .pop_close td{ outer table cell data here}
 .pop_form{ table data here}
 .pop_form td{ table cell data here}

<table class="pop_close" id="101"><tr><td>CLOSE X</td></tr>
<tr><td>
<table class="pop_form" id="102">
<tr><td>DATA HERE ....

Now I can set the outer table color, increase the width of the inner table and move it down the screen as I am affecting the table tag itself thus:

document.getElementById('101').style.backgroundColor='red'
document.getElementById('101').style.top=top+'px';
document.getElementById('102').style.width=width+'px';
document.getElementById('102').style.height=height+'px';

But how do I change the cell data of "pop_form"? (on fourth line of CSS where there is a space before the td tag) I cannot set all td's to one class / ID as there are others on the page that remain unaffected.

It's actually a pop up form where the user can specify their own outer border color beside the close button, and set a width and border style of the inner table, and then I show the result on screen. But setting the inner table border has me stumped. (And before you tell me, yes, I know it's frowned upon to nest tables, but it's easiest layout method I know!)

+++ 14th Nov update

I think I have found part of the problem. As I explained to another user, I have a table up to the <tr> tag, then I add the rest of the table data dynamically via javascript. Having just looked at code, up to the <tr> tag, it's 'hard coded' into the HTML page, (and hidden with the visibility:hidden CSS) So JS can 'see' this, and is able to manipulate it. The inside of the table however is generated within the JS, so effectively it cannot see it to change it, (that's my assumption) It can still 'pull' its class data into the table as the CSS is again part of the main page, but I'm asking javascript to manipulate its own data. For sake of clarity, I show the code below:

<span style="position:fixed;top:20px;height:100%;width:100%;visibility:hidden;pointer-events:none;z-index:10;" id="101">
<table cellspacing="0" align="center" class="pop_close" id="103">
<tr><td align="right">
<a href="javascript:void[0];" onclick="HidePop('101');" style="pointer-events:auto">CLOSE</a></td></tr>
<tr><td>
<table cellspacing="0" align="center" class="pop_form" id="102">
<!-- text appears here-->
</table>
</td></tr>
</table>
</span>

The above is hard coded. Then, in javasript I add:

 form[0]='<tr><td valign="top">'+str+'</td></tr>\\n';
form[1]='<tr><td valign="top">'+str+'<br><br>'+bot_code+'</td></tr>\\n';
form[2]='<tr><td valign="top"><img src="%prod_img%">\\n</td>\\n<td valign="top">\\n'+str+'</td>\\n</tr>\\n<tr>\\n<td colspan="2">\\n<center>\\n'+bot_code+'\\n</center>\\n</td>\\n</tr>\\n';
form[3]='<tr><td valign="top"><img src="%prod_img%">\\n</td>\\n<td valign="top" id="pf_td>\\n'+str+'<br><br>\\n<center>\\n'+bot_code+'\\n</center>\\n</td>\\n</tr>\\n';
form[4]='<tr><td valign="top">'+str+'</td>\\n<td valign="top">\\n<img src="%prod_img%">\\n</td>\\n</tr>\\n<tr>\\n<td colspan="2">\\n<center>\\n'+bot_code+'\\n</center>\\n</td>\\n</tr>\\n';
form[5]='<tr><td valign="top">'+str+'<br><br>\\n<center>\\n'+bot_code+'\\n</center>\\n</td>\\n<td valign="top">\\n<img src="%prod_img%">\\n<//td>\\n</tr>\\n';

It's these latter form values that I'm trying to set the border details for from data entered via a form.

Answer 1

Are there multiple nested tables, 101..102..103..10n, or it just these two?

If there are only the two, I'm curious why you wouldn't just use the ID instead of the class.

You could check out document.getElementsByClassName() , which creates an array of objects that have that class name.

Answer 2

I managed to work around the problem.

The inner <td> tag I gave a class name of "pop", (ie the ones where it says "DATA HERE")

I then used the javascript to dynamically set the width, height, background colour of the table with id of "102"

Next, I used "document.getElementById('pop').innerHTML=DATA HERE"; to 'inject' the text into the table cell. And to move the table down the screen ... I moved the whole that holds the tags down the screen