Use javascript to display/not display few tables.

Hi,
I have three drop downs and a check box on a jsp page. By default a lot of tables are displayed in div tags on that page. When the user selects different values for the dropdown and check box fields, only few of the tables meeting that criteria need to be displayed. How can I achieve this using javascript?

Any help is appreciated.

Thanks a lot
-H

Edited by herald10 on 05/19/05 12:53 PM (server time).

Find more posts tagged with

Comments

jbonifaci

I don't have time to give you working code, but it should be easy enough to have an onChange event on your select that hides/unhides the desired divs based off what is selected. You should be able to find several references on the web on how to do this.

herald10

Thanks for your response. Let me explain it in more detail with an example. Lets say one of the dropdowns has colors as the values. All the tables have a TD with the value of one of the colors. So when user selects red in the dropdown, only the tables that have red should be displayed. Any idea how it can be achieved?

Thanks
-H

jbonifaci

Well, you could iterate through all of the td's and hide any id's that don't match your color and show the ones that do.

herald10

True. But I am not sure how I can read the contents of that TD tag. Is there any method to do that? For example, if we have
<TD> blue </TD>
How can I get the value 'blue' using a method?

Thanks again
-H

herald10

I was able to get the value by using firstChild.nodeValue.

Thanks
-H

Migrateduser

If you give any HTML item an id, you can get its inner HTML. For instance:

<TD id="td1">blue</TD>
...
var guts = document.getElementById("td1").innerHTML;

If you weren't interested in the HTML, you could capture "innerText", otherwise.

Using DIV tags is great for this, though. When an onChange event is triggered, you could set the visibility of the item -- but always give it an ID, as in the above example:

document.getElementById("div1").style.visibility = "hidden";
-or-
document.getElementById("div1").style.visibility = "visible";

Dave

Current Environment(s):
(1) TS 6.5 on W2K3
(2) TS 6.1 SP1 on W2K3
By the way, I miss Unix terribly.

herald10

Dave,
Thanks for your response. It works great. But it leaves an big empty space. How can I get rid of it? The html page has around 10 tables, each enclosed in a div tag. When I set the visibility of 5th div tag to hidden, it just leaves an empty space as big as the table was when it got displayed. Can I get rid of it?

Thanks
-H

Edited by herald10 on 05/20/05 09:23 AM (server time).

Migrateduser

There's a CSS2 spec that says a third option for visibility is "collapse" and you can see the spec here: http://www.w3schools.com/css/css_reference.asp. I haven't used that spec, but it might have what you're looking for.

If that's not an option, I know exactly what you're talking about and if you wanted your DIV tags to display without the overhead of extra space, you'd need to set innerHTML = '' for the other tables. There's a little more to it than that, though... for instance, if you wanted to display DIV1 but hide DIV2-DIV10, you would set innerHTML = '' for DIV2-10, as above, but what happens when you want to later hide DIV1 and show DIV5? Because of this, you may want to (maybe need to) declare and construct your DIV html chunks in Javascript. So:


var div1HTML = '<table ...  </table>';
var div2HTML = '<table ...  </table>';
...
document.getElementById('div1').innerHTML = div1HTML;

Because you have each DIV HTML stored in a variable, you could recall and set each value when necessary. In this case, you could recover DIV5 with the following line: document.getElementById('div5').innerHTML = div5HTML , for instance.

Dave

Current Environment(s):
(1) TS 6.5 on W2K3
(2) TS 6.1 SP1 on W2K3
By the way, I miss Unix terribly.

MikeatBDB

Herald10

Have you looked at style.display = 'none'? This should be an option on the div and I know it works on IE and I think it does for Netscape.

Regards

Mike

Bircham Dyson Bell