471,319 Members | 1,611 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,319 software developers and data experts.

Show/hide table columns

Hi,
I have created a table colelcting data from an XML source.
After I built the whole table I ahve given user options to filter out
columns from the table.
For this I have collected all the column values of the table in a
select list box.
Depending on what user selects from the selct list I am displaying the
corresponding columns and hiding the columns which the user has not
selected fromt the list.

Now after the table is generated if now user selects multilple values
from the list, the table displays the corresponding data but all on
same column , i.e the table has only 1 column but will multiple values.
Code snippet to create table
for (i = 0 ; i < dt[0].childNodes.length ; i++) // dt is my XML query
result
{
.......
var data = dt[0].childNodes[i].nodeName.trim(); // data is my column
header value
var container = document.createElement('TH'); //creatinh header
element
container.setAttribute("id",data); //assigning
id same as column header name

}

Code snippet to show/hide columns in table
// allDetailCheckList.length = array of all the column header values in
the table
// detailCheckList = aray of column header selected by
user from list
for (i = 0 ; i < allDetailCheckList.length ; i++)
{
var th = document.getElementById(allDetailCheckList[i]);
if (th)
{
if ( detailCheckList.grep(allDetailCheckList[i]) == -1) // grep
function returns -1 if allDetailCheckList[i] is not found in array
detailCheckList. else returns the index.
th.style.display = "none";
else
th.style.display = "block";
}
}

Where I am going wrong ? Should I have to set some specific property
for the table created?

Regards,
Suvajit

Mar 28 '06 #1
2 11568
jeet_sen said on 28/03/2006 8:54 PM AEST:
Hi,
I have created a table colelcting data from an XML source.
After I built the whole table I ahve given user options to filter out
columns from the table.
For this I have collected all the column values of the table in a
select list box.
Depending on what user selects from the selct list I am displaying the
corresponding columns and hiding the columns which the user has not
selected fromt the list.

Now after the table is generated if now user selects multilple values
from the list, the table displays the corresponding data but all on
same column , i.e the table has only 1 column but will multiple values.
Code snippet to create table
for (i = 0 ; i < dt[0].childNodes.length ; i++) // dt is my XML query
When posting code, manually wrap it at about 70 characters. Allowing
auto-wrapping almost always introduces errors and obfuscates the code
and possible problems.

It's much more efficient to store a reference to objects you are dealing
with than look up every time:

var nodes = dt[0].childNodes;
for (var i=0, len=nodes.length; i<len; i++){

result
{
.......
var data = dt[0].childNodes[i].nodeName.trim(); // data is my column
header value
No need to declare data every time, do it before the for loop:

var data;
var nodes = dt[0].childNodes;
for (var i=0, len=nodes.length; i<len; i++){
data = nodes[i].nodeName.trim();
var container = document.createElement('TH'); //creatinh header
element
container.setAttribute("id",data); //assigning
id same as column header name
It is much easier (and better supported) to access the id property
rather than use setAttribute:

container.id = data;

}

Code snippet to show/hide columns in table
// allDetailCheckList.length = array of all the column header values in
the table
// detailCheckList = aray of column header selected by
user from list
for (i = 0 ; i < allDetailCheckList.length ; i++)
Modify this for loop as indicated above.
{
var th = document.getElementById(allDetailCheckList[i]);
if (th)
{
if ( detailCheckList.grep(allDetailCheckList[i]) == -1) // grep
function returns -1 if allDetailCheckList[i] is not found in array
detailCheckList. else returns the index.
th.style.display = "none";
else
th.style.display = "block";


Do not set th, tr, td, etc. to block, use '' (empty string). CSS 2
defines new display attributes such as 'table-row' and 'table-cell'. IE
doesn't implement them but other browsers do. Setting a th's display to
'block' in Firefox will have unwelcome consequences. Setting it ''
allows it to return to the default that is appropriate for whichever
browser.

[...]

--
Rob
Mar 29 '06 #2
Hi Rob,
Thanks for the suggestions. I will try follow the guidelines.
And finally, replacing block by '' has solved my problem.
Thanks a lot.
Regards,
Suvajit

Mar 29 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by oLE | last post: by
4 posts views Thread by Tim | last post: by
12 posts views Thread by Jerad Rose | last post: by
1 post views Thread by lydia sista via DotNetMonster.com | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.