SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Hide/Show table column in javascript

    I would like to be able to show/hide a table column based on a set of checkboxes. The HTML is generated using XSL and is not a JSP. Also, the table contains thead and tbody as well as th tags. I have tried numerous solutions found online, but none work successfully. When using the display='none', display='block' attributes, the table get formed to be in a single column. Help !!!

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Except in IE table cells have a default display type of table-cell, not block.

    This page uses a script that can hide/show table columns.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks exactly what I want, but I can't see the source files.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't know how to view source? You can get to it via the context menu and your browsers' View menu.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ajmariella from an email message
    I am interested to know how you were able to use javascript and css to build your Chart of Support for CSS Filters/Hacks table. I need to do something very simliar, but have encountered problems with table columns. I viewed the source of the page, but the source did not contain the checkboxes or update button. Would you share the entire source html/js/css of this table ?
    First off, I hope you don't mind me responding to this here since it's a continuation of this public discussion.

    The entire form with the checkboxes and update button is created with some JavaScript/DOM scripting. Doing that has a big benefit: if the script to hide the columns isn't present, neither is the user interface for it, thus preventing confusion for those who don't have JavaScript support enabled. The script is an external one so it is as unobtrusive as possible. You can find the URL to it in the page's source. (I'd rather not post it here. It's easy to find anyway.)

    DOM is short for Document Object Model. It allows you to access and manipulate elements and other parts of web pages.

    Here are some resources on the DOM:
    Rough Guide to the DOM
    JavaScript tutorial - W3C DOM introduction
    http://www.quirksmode.org/js/contents.html#dom
    http://www.brainjar.com/
    http://developer.apple.com/internet/...ent/dom2i.html
    http://developer.mozilla.org/en/docs/DOM:document
    http://developer.mozilla.org/en/docs..._DOM_Reference
    http://digital-web.com/articles/form...d_the_w3c_dom/
    http://www.w3.org/DOM/
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Member
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the code that builds the checkboxes and update button. In my application, I am building my table using XSL.
    I have multiple tables that I would like to use this for, this script only seems to work for a single table. How could I modify it to work for multiple tables in the same form ?
    Last edited by ajmariella; Mar 26, 2007 at 09:57.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •