By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,161 Members | 2,002 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,161 IT Pros & Developers. It's quick & easy.

Showing/Hiding <tr> s

P: n/a
Hi All -

I have some problems getting a small piece of javascript working
correctly for Firefox. Here is what I am trying to do -

1. I have a form (like a search form)
2. I have many groups of searchable fields in the fields
3. Each group can be expanded/collapsed by clicking on a link
"(Fewer|More) Options" which sits right next to the group title.

For eg. -
I can search a person on "Name" - this group, "Name" has one field,
"First Name" in the collapsed state and more searchable fields ("Last
Name", "Middle Name") in the expanded state.

To achieve this, what I did was -

1. All the fields in one table
2. One row for each Label/Text-Box pair
3. Two columns on each row, the left one for Label and the right one
for Text-Box

For collapsing/expanding purposes, I had assigned an ID to each <tr>
that can be hidden/shown. And I had used the following js functions for
doing the same -

function toggleFields() {
var i = 0;
var src = document.getElementById(arguments[0]);
if (src.state == null || src.state == 'more') {
src.state = 'few';
src.innerHTML = 'Fewer Options';
}
else {
src.state = 'more';
src.innerHTML = 'More Options';
}
for (i = 1; i < arguments.length; i++) {
var obj = document.getElementById(arguments[i]);
if (obj.showing == null || obj.showing == 1) {
obj.showing = 0;
}
else {
obj.showing = 1;
}
displayObject(arguments[i], obj.showing);
}
}
function displayObject(id, show) {
var obj = document.getElementById(id);
if (obj==null) return;
obj.style.display = show ? 'block' : 'none';
obj.style.visibility = show ? 'visible' : 'hidden';
}
The HTML is something like this -
<table>
<tr id="fname"> <td> ... </td> <td> ... </td> </tr>
<tr id="lname"> <td> ... </td> <td> ... </td> </tr>
<tr id="mname"> <td> ... </td> <td> ... </td> </tr>
</table>

And the link to expand/collapse this group is like this -
<a id="nameToggle" href="toggleFields('nameToggle', 'lname', 'mname')">
Fewer Options </a>

The problem that I am facing -
1. It works well in IE-6.0
2. Goofs up the UI in Firefox-1.0.4 -
Works well the first time, (i.e., hiding lname and mname), but when
trying
to expand the group again, the arrangement of rows/columns goes
amiss.

Is there something that I am doing wrong?

Thanks
- Anand

Aug 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
c.**********@gmail.com wrote:
obj.style.display = show ? 'block' : 'none'; 2. Goofs up the UI in Firefox-1.0.4 -


In CSS 2 browsers, <tr> elements have a default display of table-row, not
block. Toggle between "none" and "" instead.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Aug 23 '05 #2

P: n/a

David Dorward wrote:

In CSS 2 browsers, <tr> elements have a default display of table-row, not
block. Toggle between "none" and "" instead.


Great! It works well now.
Thanks for your help
- Anand

Aug 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.