Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #22277 > unrolled thread

Re: best method to "hide" a whole <table> column ?

Back to article view | Back to comp.lang.javascript

This discussion starts older than the indexed window; earlier articles aren't shown. The article labeled Started by below is the oldest one visible, not the original post.

Contents

  Re: best method to "hide" a whole <table> column ? kumarcherukuris@gmail.com - 2013-12-10 09:02 -0800
    Re: best method to "hide" a whole <table> column ? Denis McMahon <denismfmcmahon@gmail.com> - 2013-12-10 19:20 +0000
    Re: best method to "hide" a whole <table> column ? Denis McMahon <denismfmcmahon@gmail.com> - 2013-12-10 20:31 +0000
      Re: best method to "hide" a whole <table> column ? "Evertjan." <exjxw.hannivoort@interxnl.net> - 2013-12-10 22:35 +0000
        Re: best method to "hide" a whole <table> column ? Denis McMahon <denismfmcmahon@gmail.com> - 2013-12-11 00:16 +0000
        Re: best method to "hide" a whole <table> column ? Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2013-12-11 11:16 +0100
          Re: best method to "hide" a whole <table> column ? Nisse Engström <news.NOSPAM.uvex6@luden.se> - 2014-02-15 02:38 +0100
        Re: best method to "hide" a whole <table> column ? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2013-12-11 11:23 -0200
          Re: best method to "hide" a whole <table> column ? Denis McMahon <denismfmcmahon@gmail.com> - 2013-12-11 19:16 +0000
      Re: best method to "hide" a whole <table> column ? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-12-11 00:22 +0100
        Re: best method to "hide" a whole <table> column ? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2013-12-11 14:36 -0200
          Re: best method to "hide" a whole <table> column ? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-12-11 18:27 +0100
          Re: best method to "hide" a whole <table> column ? Denis McMahon <denismfmcmahon@gmail.com> - 2013-12-11 19:23 +0000
            Re: best method to "hide" a whole <table> column ? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2013-12-11 22:08 -0200

#22277 — Re: best method to "hide" a whole <table> column ?

On Tuesday, 21 July 2009 02:41:44 UTC+5:30, Alexandre Morgaut  wrote:
> On Jul 20, 12:46 pm, whygee <why...@yg.yg> wrote:
> > Hello,
> >
> > I'm developpinghttp://yasep.org/tools/listed.html
> > where there can be any number of tables of the same class and structure.
> > I would like to enable the user to "hide" a whole column
> > (like the "value", "size", "comments" etc.) of any of these tables.
> > The best way I have found is to set the "display" or "visibility"
> > style attribute to "none" or "hidden".
> > It works easily because all the <td> have the correct "class" attribute.
> >
> > The issue is that I must change the .css on the fly for any table,
> > independently. If I knew the .id in advance, I could write
> >    table.table_id > td.column_class {  display:none; }
> 
> You can do much simplier using colgroup tags
> 
> // CSS
> .hidden {
>     display: none;
> }
> 
> 
> // HTML
> 
> <table id="books">
>   <colgroup id="books_isbn"></colgroup>
>   <colgroup id="books_title"></colgroup>
>   <colgroup id="books_price"></colgroup>
>   <tr>
>     <th>ISBN</th>
>     <th>Title</th>
>     <th>Price</th>
>   </tr>
>   <tr>
>     <td>3476896</td>
>     <td>My first HTML</td>
>     <td>$53</td>
>   </tr>
> </table>
> 
> // JavaScript
> 
> document.getElementById('books_price').style.display = 'none';
> 
> //or if you want to do it by column number
> document.getElementById('books').getElementsByTagName('colgroup')
> [2].style.display = 'none';

Hi, the above code is not working . could you please check it and updates us. its really useful to us.

-thanks
Leo

[toc] | [next] | [standalone]

#22279

On Tue, 10 Dec 2013 09:02:28 -0800, kumarcherukuris wrote:

> Hi, the above code is not working . could you please check it and
> updates us. its really useful to us.

Hi, you're responding to a 4 year old post, there's a good chance the 
original author won't see it.

Please clarify, you say the code is really useful to you, so I assume it 
is working, or has been working, on your website, but is no longer 
working on them (as you also say "the above code is not working").

What did you change on your website between when the code was working and 
the code stopped working? That might be the problem, rather than the code 
itself.

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#22280

On Tue, 10 Dec 2013 09:02:28 -0800, kumarcherukuris wrote:

> Hi, the above code is not working . could you please check it and
> updates us. its really useful to us.

Having investigated, I'm suspicious that the code may never have worked, 
however a fairly simple solution is to loop through all the rows in a 
table setting the cell.style.display property of the relevant column to 
either hide or table-cell.

function hide(tid,c,h=true){
  var i,t=document.getElementById(tid);
  for(i=0;i<t.rows.length;i++)
    t.rows[i].cells[c-1].style.display=h?"none":"table-cell";
}

Assumes all rows have the same number of columns
tid is the text id of the table
c is the 1-based column number
h is true for hide, false for show

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#22281

Denis McMahon wrote on 10 dec 2013 in comp.lang.javascript:

> function hide(tid,c,h=true){
>   var i,t=document.getElementById(tid);
>   for(i=0;i<t.rows.length;i++)
>     t.rows[i].cells[c-1].style.display=h?"none":"table-cell";
>}

no need for a loop [chrome tested]:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
td {font-size:25pt;}
.tx td:first-child + td {display:none;}
</style> 
<script>
function toggle(t){ 
   t.className = (t.className == '') ?'tx' :'';
};
</script>
</head> 
<body>
<table onclick = 'toggle(this)' border = 1>
<tr><td>1<td>2<td>3
<tr><td>1<td>2<td>3
<tr><td>1<td>2<td>3
<tr><td>1<td>2<td>3
</table>
click on table to toggle row 2
</body> 
</html>

[toc] | [prev] | [next] | [standalone]

#22283

On Tue, 10 Dec 2013 22:35:39 +0000, Evertjan. wrote:

> Denis McMahon wrote on 10 dec 2013 in comp.lang.javascript:

>> Function to toggle display of a column by looping through each 
>> row in a table

> no need for a loop [chrome tested]:

A much more elegant solution than mine for the single column case (and btw 
works on firefox 24 too), but how well does it extend to multiple 
columns? I'm thinking of a ui where the developer may wish to offer the 
viewer the choice to arbitrarily hide / unhide any column of a multi 
column table.

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#22285

Could the col tag not be used? If you put something like
display: none; into the col tag for the desired column, the
column should disappear, right?

Alternatively one could give each ht and td element a class that
contains a column indicator, you could let all of them disappear
with display: none; .

Hans-Georg

[toc] | [prev] | [next] | [standalone]

#23099

On Wed, 11 Dec 2013 11:16:17 +0100, Hans-Georg Michna wrote:

> Could the col tag not be used? If you put something like
> display: none; into the col tag for the desired column, the
> column should disappear, right?

Or 'visibility: collapse'.

<http://www.w3.org/TR/CSS21/tables.html#columns>:

  "The following properties apply to column and column-group elements:

   'border' ...
   'background' ...
   'width' ...
   'visibility' ... "


/Nisse

[toc] | [prev] | [next] | [standalone]

#22286

Em 10/12/2013 20:35, Evertjan wrote:

<snip>
> </table>
> click on table to toggle row 2
                            ^^^
                            column 2


-- 
Joao Rodrigues (J.R.)

[toc] | [prev] | [next] | [standalone]

#22289

On Wed, 11 Dec 2013 11:23:30 -0200, Joao Rodrigues wrote:

> Em 10/12/2013 20:35, Evertjan wrote:
> 
> <snip>
>> </table>
>> click on table to toggle row 2
>                             ^^^ column 2

That's just being picky, I'm sure Evertjan meant to write column there.

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#22282

Denis McMahon wrote:

> function hide(tid,c,h=true){
                       ^^^^^
Syntax error.  Default parameters cannot (yet) be defined this way in 
strictly conforming implementations of ECMAScript.  You have to initialize 
them if they are not present, for example:

  function hide(tid, c, h)
  {
    if (typeof h == "undefined")
    {
      h = true;
    }

    /* or */

    if (arguments.length < 3)
    {
      h = true;
    }

The difference between the first and second approach is that with the second 
one there is no false positive if “undefined” is passed for “h”.

>   var i,t=document.getElementById(tid);
>   for(i=0;i<t.rows.length;i++)
>     t.rows[i].cells[c-1].style.display=h?"none":"table-cell";

    t.rows[i].cells[c-1].style.display = h ? "none" : "";

Setting the value of a style property to the empty string resets it to its 
initial value.

> }
> […]

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22287

Em 10/12/2013 21:22, Thomas 'PointedEars' Lahn escreveu:
> Denis McMahon wrote:
>
>> function hide(tid,c,h=true){
>                         ^^^^^
> Syntax error.  Default parameters cannot (yet) be defined this way in
> strictly conforming implementations of ECMAScript.  You have to initialize
> them if they are not present, for example:
>
>    function hide(tid, c, h)
>    {
>      if (typeof h == "undefined")
>      {
>        h = true;
>      }

Considering your "strictly conforming implementations of ECMAScript", 
it could be just:

   if (h === undefined) { h = true; }

or

   h = h || true;

>
>      /* or */
>
>      if (arguments.length < 3)
>      {
>        h = true;
>      }
>
> The difference between the first and second approach is that with the second
> one there is no false positive if “undefined” is passed for “h”.

It's not the case, but there is a problem with this sort of testing when 
an optional argument is passed a value from another source such as a 
configuration object, when it might produce undefined. That's why it is 
better to test for undefined.

>
>>    var i,t=document.getElementById(tid);
>>    for(i=0;i<t.rows.length;i++)
>>      t.rows[i].cells[c-1].style.display=h?"none":"table-cell";
>
>      t.rows[i].cells[c-1].style.display = h ? "none" : "";
>
> Setting the value of a style property to the empty string resets it to its
> initial value.
>

Good catch.


-- 
Joao Rodrigues (J.R.)

[toc] | [prev] | [next] | [standalone]

#22288

Joao Rodrigues wrote:

> Em 10/12/2013 21:22, Thomas 'PointedEars' Lahn escreveu:
>> Denis McMahon wrote:
>>> function hide(tid,c,h=true){
>>                         ^^^^^
>> Syntax error.  Default parameters cannot (yet) be defined this way in
>> strictly conforming implementations of ECMAScript.  You have to
>> initialize them if they are not present, for example:
>>
>>    function hide(tid, c, h)
>>    {
>>      if (typeof h == "undefined")
>>      {
>>        h = true;
>>      }
> 
> Considering your "strictly conforming implementations of ECMAScript",
> it could be just:
> 
>    if (h === undefined) { h = true; }

Non sequitur.  The “undefined” property of the Global Object did not always 
have the ReadOnly attribute before.  You knew fairly well what I meant by 
“strictly conforming” in that regard, did you not?
 
> or
> 
>    h = h || true;

Not equivalent; also inefficient, and error-prone.

>>      /* or */
>>
>>      if (arguments.length < 3)
>>      {
>>        h = true;
>>      }
>>
>> The difference between the first and second approach is that with the
>> second one there is no false positive if “undefined” is passed for “h”.
> 
> It's not the case,

Yes, it is.  Passing any value, even the “undefined” value, will increase 
the value of arguments.length, but passing the “undefined” value cannot be 
told from not passing *any* (here: third) argument if you use typeof or 
compare against “undefined” (provided that it has not been overwritten) 
because formal parameters for which no argument has been passed are 
initialized with (the built-in) “undefined” implicitly.

> but there is a problem with this sort of testing when
> an optional argument is passed a value from another source such as a
> configuration object, when it might produce undefined. That's why it is
> better to test for undefined.

Neither test is viable when a parameter object is passed, and nobody but you 
suggested that it is intended to.  You are jumping to conclusions again.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22290

On Wed, 11 Dec 2013 14:36:26 -0200, Joao Rodrigues wrote:

> Em 10/12/2013 21:22, Thomas 'PointedEars' Lahn escreveu:

>> blah

> Considering your "strictly conforming implementations of ECMAScript", it
> could be just:
>    if (h === undefined) { h = true; }
> or
>    h = h || true;

Not sure about the last one, what happens if h is false?

h = h (false) || true;

so h = true;

This would (in this code) prevent hidden columns being unhidden.

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#22291

On 11/12/2013 17:23, Denis McMahon wrote:
> On Wed, 11 Dec 2013 14:36:26 -0200, Joao Rodrigues wrote:
>
>> Considering your "strictly conforming implementations of ECMAScript", it
>> could be just:
>>     if (h === undefined) { h = true; }
>> or
>>     h = h || true;
>
> Not sure about the last one, what happens if h is false?
>
> h = h (false) || true;
>
> so h = true;
>
> This would (in this code) prevent hidden columns being unhidden.

Oops! Sorry, I've deviated from the original problem because of the 
question raised by Thomas (what would happen if 'h' was not passed a value).

As 'h' should be either true or false, then a simple test might use the 
double negation pattern (!!):

h = !!h

Cheers,
Joao Rodrigues

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web