Show/hide table columns

[jeet_sen]

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.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);
if (th)
{
if ( detailCheckList.grep(allDetailCheckList) == -1) // grep
function returns -1 if allDetailCheckList 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

 

[RobG]

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.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.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);
if (th)
{
if ( detailCheckList.grep(allDetailCheckList) == -1) // grep
function returns -1 if allDetailCheckList 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.

[...]

 

[jeet_sen]

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