Show/hide table columns

Discussion in 'Javascript' started by jeet_sen, Mar 28, 2006.

  1. jeet_sen

    jeet_sen Guest

    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
    jeet_sen, Mar 28, 2006
    #1
    1. Advertising

  2. jeet_sen

    RobG Guest

    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.

    [...]



    --
    Rob
    RobG, Mar 29, 2006
    #2
    1. Advertising

  3. jeet_sen

    jeet_sen Guest

    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
    jeet_sen, Mar 29, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. RA
    Replies:
    1
    Views:
    3,969
  2. Noozer

    Hide/Show table columns?

    Noozer, Dec 1, 2004, in forum: HTML
    Replies:
    3
    Views:
    26,004
    Nik Coughlin
    Dec 1, 2004
  3. Jacksm
    Replies:
    2
    Views:
    844
    Paul Chalekian
    Nov 21, 2006
  4. Replies:
    6
    Views:
    216
  5. ll
    Replies:
    2
    Views:
    640
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page