Javascript syntax used in hiding html column

Question

I am looking at code that toggles displaying and hiding a table column.

I am assuming this creates an array:

var States = { };

Why no need for the new operator?

Does this line set the States col element .isOpen property to true?

States[col] = {isOpen : true};

I am figuring out how to modify this function so I can save the state of this column with a cookie. i.e. - when page is rendered, column is set to none by default. However, if the last operation was show column and the page is re-rendered I would like the column to still be open, not go back to default.

The code:

/**************************************************************************
 *
 * Function:    toggleVis
 *
 * Description: Following Function hides and expands the main column.
 *              
 *
***************************************************************************/
// Set the default "show" mode to that specified by W3C DOM
// compliant browsers

  var showMode = 'table-cell';


// However, IE5 at least does not render table cells correctly
// using the style 'table-cell', but does when the style 'block'
// is used, so handle this

  if (document.all) showMode='block';

// This is the function that actually does the manipulation

var States = { };

function toggleVis(col){

    if (!States[col] || States[col].IsOpen == null)
    {
        States[col] = {isOpen : true}; // This assumes the cell is already shown
        //States[col] = {isOpen : false}; // This assumes the cell is already hidden
    } 

    //mode =  States[col].IsOpen ? showMode : 'none';
    mode =  States[col].IsOpen ? 'none' : showMode; //starts from closed, next click need open

    cells = document.getElementsByName(col);
    for(j = 0; j < cells.length; j++) cells[j].style.display = mode;

    States[col].IsOpen = !States[col].IsOpen;
}

Answer 1

Ok, Maybe this is way off base but I think you are doing this entirely the wrong way.

1. Download jQuery and install it (it's about 17kb, a tiny bit of overhead).
2. When you generate your page give each td in a given column a common class such as class='col2'.

3. Use your scripting library to remove hide all the cells.

   $('.col2).hide()

To show the column you use the show function:

$('.col2').show()

You are done.

Things like this are so much easier with the correct libraries it's painful to see it done other ways.

Answer 2

The syntax, var States = { }, uses JSON notation to create a new object.

Similarly, {isOpen : true} creates a new object that has an isOpen property equal to true.

Answer 3

var States = {}

This creates a new object - arrays and objects are quite similar in javascript, but some subtle differences are there.

States[col] = {isOpen : true}

creates a new object and puts it into the next index of the States object. You can now access this value using States.col1.isOpen for example.

I notice you have two different ways of typing: IsOpen en isOpen, this is probably causing a problem for you.

Next you have to set the cookie with the information you want - take a peek at this URL: http://www.w3schools.com/JS/js_cookies.asp

Hope this helps!

Answer 4

You need some basic concepts:

FIRST

A cookie is just a specially formatted string, accessible as a property on the document object:

document.cookie

You can simply save the state at the end of the toggleVis function:

  ...
  States[col].IsOpen = !States[col].IsOpen;

  // uses the function from quirksmode.org
  createCookie("colState", States[col].IsOpen, 7 /*days until expiration*/);
}

and read the cookie on window load (this is just pseudocode):

window.onload = function() { 
  // States[col] = readCookie("colState"); 
  // set the style for the columns
};

SECOND

An object is declared by using curly braces, and variable names ARE case-sensitive.

States[col] = { isOpen : true };

is NOT THE SAME as

States[col] = { IsOpen : true };

You seem to have this bug in your code because you try to read IsOpen but set isOpen.