Toggle(show/hide) the selected odd and even columns of a table
<p>I have tried the following code, but it is not working for even columns as can be seen from the given example. I couldnot identify the problem. Please help me with necessary corrections. I am only an enthusiastic learner.</p>

<p>CSS:</p>

<pre><code>.foo{visibility:hidden};
.faa{visibility:hidden};
.fii{visibility:hidden};
</code></pre>

<p>JavaScript :</p>

<pre><code>var toggle = function (action) {
    var trs = document.getElementById('bar').getElementsByTagName('tr'),
        trs_count = trs.length,
        needed = [],
        total = 0,
        pattern = /faa|foo|fii\b/g,
        initial= 'show';

    for (i=0; i&lt;trs_count; i++) {
        var tds = trs[i].getElementsByTagName('td'),
            tds_count = tds.length;
        for (j=0; j&lt;tds_count; j++) {
            if (pattern.exec(tds[j].className)) {
                needed.push(tds[j]);
                total++;
            }
        }
    }

    toggle = function (action) {
        if (this.display == null) {
            this.display = initial;
        }
        if (action == null) {
            this.display = (this.display == 'hide') ? 'show' : 'hide';
        }
        else {
            this.display = action;
        }
        for (i=0; i&lt;total; i++) {
            if (this.display == 'show') {
                needed[i].style.visibility = 'hidden';//changed from display = 'block';
            }
            else {
                needed[i].style.visibility = 'visible';//changed from display = 'none';
            }
        }
        return true;
    }
    return toggle();
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;DIV ALIGN="center" style="display:none"&gt;
&lt;!-- used the following patterns. but of no use
/f(\w)\1/g, //f(\w)\1/g,  /\bfoo\b/g, /faa|foo|fii\b/g, --&gt;
&lt;/DIV&gt;

&lt;TABLE id="bar" class="reg" ALIGN="CENTER" BORDER=1 CELLSPACING=0 CELLPADDING=0 WIDTH="90%"&gt;
    &lt;TR ALIGN="left" VALIGN="middle"&gt;
        &lt;TD width="20%"&gt; URL of Site&lt;/TD&gt;
        &lt;TD width="20%"&gt;User I
        &lt;span onclick="toggle()"&gt;D&lt;/span&gt; // the event handler
        /Nickname&lt;/TD&gt;
        &lt;TD ALIGN="left" width="10%" align="center" nowrap&gt;xxx&lt;/TD&gt;
        &lt;TD width="30%"&gt;Clue&lt;/TD&gt;
        &lt;TD width="20%"&gt;Other Information&lt;/TD&gt;
    &lt;/TR&gt;
    &lt;TR ALIGN="left" VALIGN="middle"&gt;
        &lt;TD&gt;xxxxxxxxxxxxx&lt;/TD&gt;
        &lt;TD&gt;xxxxxxxxxxxxx&lt;/TD&gt;
        &lt;td class="foo"&gt;xxxxxxxxx&lt;/td&gt;
        &lt;TD class="faa"&gt;xxxxxxxxx&lt;/TD&gt;
        &lt;TD class="fii"&gt;xxxxxxxxxx&lt;/TD&gt;
    &lt;/TR&gt;
    &lt;TR ALIGN="left" VALIGN="middle"&gt;
        &lt;TD&gt;xxxxxxxxxxxxx&lt;/TD&gt;
        &lt;TD&gt;xxxxxxxxxxxxx&lt;/TD&gt;
        &lt;td class="foo"&gt;xxxxxxxxx&lt;/td&gt;
        &lt;TD class="faa"&gt;xxxxxxxxx&lt;/TD&gt;
        &lt;TD class="fii"&gt;xxxxxxxxxx&lt;/TD&gt;
    &lt;/TR&gt;
    &lt;TR ALIGN="left" VALIGN="middle"&gt;
        &lt;TD&gt;xxxxxxxxxxxxx&lt;/TD&gt;
        &lt;TD&gt;xxxxxxxxxxxxx&lt;/TD&gt;
        &lt;td class="foo"&gt;xxxxxxxxx&lt;/td&gt;
        &lt;TD class="faa"&gt;xxxxxxxxx&lt;/TD&gt;
        &lt;TD class="fii"&gt;xxxxxxxxxx&lt;/TD&gt;
    &lt;/TR&gt;
&lt;/TABLE&gt;
</code></pre>

<p>Demo: <a href="http://jsfiddle.net/arunpjohny/6yGeN/1/" rel="nofollow">Fiddle</a></p>
