best method to "hide" a whole <table> column ?
whygee
I'm developping http://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; }
but I don't know how to do this dynamically in JS.
A temporary workaround would be to set the style of each <td>
as hidden or shown, but that would create other problems
(what if I add new rows ?)
Is there a possibility to attach to a table the attributes
of its sub-elements ? The element.style attribute changes the
style of the element and potentially the sub-elements,
but this is not specific to classes (one must use another CSS
rule with another selector). I have not found how to add
another selector without manually changing all the attributes
of the sub-elements (which is not a good solution).
yg, still scratching his head
--
http://ygdes.com / http://yasep.org
Evertjan.
> I'm developping http://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; }
> but I don't know how to do this dynamically in JS.
> A temporary workaround would be to set the style of each <td>
> as hidden or shown, but that would create other problems
> (what if I add new rows ?)
Asking for "the best way" is nonsense because that is so subjective to the
whims of each programmer.
I see two ways:
1/ give all cells of a column a common unique classname,
and change the content of the class with javascript rules manipulation.
2/ Have ech column of a table consist of one <td> containing a seperate
table with only one column, and manipulate the style of that <td>.
Having the rows line-up in 2/ will be a small nightmare, but so is the
cross browser "alignment" of the rules code. Waking up the page might even
work fine.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
whygee
> Asking for "the best way" is nonsense because that is so subjective to the
> whims of each programmer.
> I see two ways:
>
> 1/ give all cells of a column a common unique classname,
> and change the content of the class with javascript rules manipulation.
>
> 2/ Have ech column of a table consist of one <td> containing a seperate
> table with only one column, and manipulate the style of that <td>.
>
> Having the rows line-up in 2/ will be a small nightmare, but so is the
> cross browser "alignment" of the rules code. Waking up the page might even
> work fine.
2) is out of question in my perspective, and 1) is already partially
implemented, but I'm a complete n0Ob about "javascript rules manipulation".
The little I know (which is already quite an advanced topic to some others)
does not allow me to change the visibility of a column
independently of other tables.
At http://www.coderanch.com/t/115872/HTML-JavaScript/javascript-modify-CSS-classes
I have found that it is possible to change javascript rules with code like
function ChangeCSSRule(xElement,xValue) {
var strCSS = 'cssRules';
if(document.all) {
strCSS = 'rules';
}
document.styleSheets[0][strCSS][0].style[xElement] = xValue;
}
but I don't see how to add or delete them, or even add a new selector :-/
And when I don't know what I search, it's difficult to ask Google the right words...
Is there a tutorial somewhere ?
Note : I don't support MSIE so as long as it works with Mozilla, I'm ok.
regards,
yg
Evertjan.
> Evertjan. wrote:
>> Asking for "the best way" is nonsense because that is so subjective
>> to the whims of each programmer.
> I understand. However, I often discover "customs", "good practices"
> etc.
>
>> I see two ways:
Now try this:
==================================
<style type='text/css'>
body {margin:80px;}
table tr td {border:red 2px solid;font-size:15pt;}
table.tabcol0 tr td.col1 {display:;}
table.tabcol0 tr td.col2 {display:;}
table.tabcol0 tr td.col3 {display:;}
table.tabcol1 tr td.col1 {display:none;}
table.tabcol1 tr td.col2 {display:;}
table.tabcol1 tr td.col3 {display:;}
table.tabcol2 tr td.col1 {display:;}
table.tabcol2 tr td.col2 {display:none;}
table.tabcol2 tr td.col3 {display:;}
table.tabcol3 tr td.col1 {display:;}
table.tabcol3 tr td.col2 {display:;}
table.tabcol3 tr td.col3 {display:none;}
</style>
<script type='text/javascript'>
function hide(table,row) {
document.getElementById(table).className = 'tabcol'+row;
};
</script>
<table id='t1' class='tabcol0' border=1>
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
</table>
<br><br>
<table id='t2' class='tabcol0' border=1>
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
<tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
</table>
<br><br>
<button onclick='hide("t1",3);'>
hide columm C of the first table</button>
<br><br>
<button onclick='hide("t2",2);'>
hide columm B of the second table</button>
<br><br>
<button onclick='hide("t2",1);'>
hide columm A of the second table</button>
<br><br>
<button onclick='hide("t1",0);hide("t2",0);'>
Show all in both tables</button>
==================================
Tested working on Chrome ;-)
Luuk
also works in IE8 and FireFox3.5.1
--
Luuk
whygee
Evertjan. wrote:
> Now try this:
>
> <style type='text/css'>
> body {margin:80px;}
> table tr td {border:red 2px solid;font-size:15pt;}
>
> table.tabcol0 tr td.col1 {display:;}
> table.tabcol0 tr td.col2 {display:;}
> table.tabcol0 tr td.col3 {display:;}
> table.tabcol1 tr td.col1 {display:none;}
> table.tabcol1 tr td.col2 {display:;}
> table.tabcol1 tr td.col3 {display:;}
> table.tabcol2 tr td.col1 {display:;}
> table.tabcol2 tr td.col2 {display:none;}
> table.tabcol2 tr td.col3 {display:;}
> table.tabcol3 tr td.col1 {display:;}
> table.tabcol3 tr td.col2 {display:;}
> table.tabcol3 tr td.col3 {display:none;}
>
> </style>
heh, that's exactly what I try to avoid :-/
My situation has an undefined and variable number of tables
so I can't make a .css with x tables because the user
will make x+1 tables...
How could the css rules be created dynamically,
when a new table is created ?
thanks for your effort,
Evertjan.
> Evertjan. wrote:
>> Now try this:
>>
>> <style type='text/css'>
>> body {margin:80px;}
>> table tr td {border:red 2px solid;font-size:15pt;}
>>
>> table.tabcol0 tr td.col1 {display:;}
>> table.tabcol0 tr td.col2 {display:;}
>> table.tabcol0 tr td.col3 {display:;}
>> table.tabcol1 tr td.col1 {display:none;}
>> table.tabcol1 tr td.col2 {display:;}
>> table.tabcol1 tr td.col3 {display:;}
>> table.tabcol2 tr td.col1 {display:;}
>> table.tabcol2 tr td.col2 {display:none;}
>> table.tabcol2 tr td.col3 {display:;}
>> table.tabcol3 tr td.col1 {display:;}
>> table.tabcol3 tr td.col2 {display:;}
>> table.tabcol3 tr td.col3 {display:none;}
>>
>> </style>
>
> heh, that's exactly what I try to avoid :-/
>
> My situation has an undefined and variable number of tables
> so I can't make a .css with x tables because the user
> will make x+1 tables...
Nonsense!
I showed you these are number of tables INDEPENDENT,
by supplying two independet tables.
please reread and reevaluate my code.
> How could the css rules be created dynamically,
> when a new table is created ?
What do you mean by created by the user?
It is you the programmar that makes the html,
and if you make the table dynamicly,
the setting of the class is no problem me thinks.
=========
I would do these dynamics serverside,
where the creating of the stylesheet is also trivial.
ASP-VBS example:
========================================
<style type='text/css'>
<%
for tabcol = 0 to maxcols
for col = 1 to maxcols
' [maxcols here shows te maximum of columns of the largest table]
' [the number of rows is not important, both could be 1000ths]
if tabcol=col then disp="none" else disp=""
%>
table.tabcol<%=tabcol%> tr td.col<%=col%> {display:<%=disp%>;}
<%
next
next
%>
</style>
=========================================
==========
If there is a html table without "classed" <td>s,
assigning them dynamically with the DOM
in clientside javascript is also easy.
you can loop though the tavle dom with "row" and "column",
but never tried that having access to serverside scripting.
Alexandre.Morgaut
> 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';
Dr J R Stockton
internet.fr>, Mon, 20 Jul 2009 12:46:11, whygee <why...@yg.yg> posted:
>
>I'm developping http://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.
Must you?
ISTM that, given a reference to the Table, you could either
(1) Fetch its innerHTML, adjust the elements, restore the innerHTML
(2) Traverse the table as a tree, counting rows, and adjust the
elements /en passant/.
The second is more elegant.
In order to avoid having to undo previous changes in detail, you could
initially construct an invisible full table, then each time copy it,
with the unwanted elements omitted, to the visible table.
Alternatively, you could store the table data as an array of arrays (or
otherwise), and regenerate it each time, either as an innerHTML string
or as an element tree.
HTML should have alternative syntax for Tables, using TC for columns
instead of TR for rows; then you would only need to style the TC
elements.
--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk IE7 FF3 Op9 Sf3
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
RobG
> Hello,
>
> 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.
As Alexandre suggested, you can use colgroup elements, then show or
hide the colgroup.
> 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; }
> but I don't know how to do this dynamically in JS.
> A temporary workaround would be to set the style of each <td>
> as hidden or shown, but that would create other problems
> (what if I add new rows ?)
Yes, that's an issue that can be avoided using colgroups.
Here's a script I wrote some time ago that should do the job of
modifying a style rule. For more information, check the archives,
checkout David Mark's MyLibrary, or peter michaux's FORK. Matt Kruse
used to have some of this stuff on his javascript toolbox site, but
that seems to have closed down.
<script type="text/javascript">
// To change the display property of class 'foo'
// changeStyle('foo', 'display', 'none');
// name : class name
// spName : style property name
// newValue: value to set
function changeStyle(cName, spName, newValue)
{
// Get the style sheets collection
var sSheets = document.styleSheets;
// Exit if no style sheets collection
if (!sSheets || !sSheets.length) return;
// Work out which rule accessor name is needed,
// either W3C or IE compliant
var rules = (sSheets[0].cssRules)? 'cssRules' :
(sSheets[0].rules)? 'rules' : null;
// Exit if not one of the above
if (!rules || 'object' != typeof sSheets[0][rules]) return;
// Setup some variables
var sRule, sRules;
// Setup a RegExp to test class names with
// selectorText allowed to have '.' or '*' as leading character
// browser dependent (old IE uses '*')
var re = new RegExp('^[.*]' + cName + '$');
// Go thru style sheets & get rules
for(var i=0, m=sSheets.length; i<m; ++i){
sRules = sSheets[i][rules];
// Look for rule & modify it
for (var j=0, n=sRules.length; j<n; ++j){
sRule = sRules[j];
if (re.test(sRule.selectorText)){
sRule.style[spName] = newValue;
// Can return here if know only one instance of rule
return;
}
}
}
}
</script>
--
Rob
yg
> On Jul 20, 12:46 pm, whygee <why...@yg.yg> wrote:
> > 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
I must say... wow... that's the answer that I expected without hoping
that
it could be so simple and so adapted. I had never heard of <colgroup>
before,
and if I did, it never seemed to reach my brain...
> // 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';
This does not seem to work :-(
Here is a first test :
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<html>
<style> /* I'm not sure it's useful */
.hidden {
display: none;
}
</style>
<body onload="init()">
<table border="1">
<colgroup id="col1" align="right">
<colgroup id="col2" align="left">
<colgroup id="col3" align="right" style="color:#0000FF;">
<tr>
<th onclick="hidecol(1)">ISBN</th>
<th onclick="hidecol(2)">Title</th>
<th onclick="hidecol(3)">Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>3489632</td>
<td>My best HTML</td>
<td>$42</td>
</tr>
</table>
<button id="col1bt" onclick="showcol(1)">show col 1</button>
<button id="col2bt" onclick="showcol(2)">show col 2</button>
<button id="col3bt" onclick="showcol(3)">show col 3</button>
</body>
<script>
var colid=new Array(), colbt=new Array();
function showcol(i) {
colid[i].style.display="";
colbt[i].style.display="none";
}
function hidecol(i) {
colid[i].style.display="none";
colbt[i].style.display="";
}
function init() {
for (var i=1; i<4; i++) {
colid[i]=document.getElementById("col"+i);
colbt[i]=document.getElementById("col"+i+"bt");
showcol(i);
}
}
</script>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The buttons disappear and reappear correctly but not the columns :-/
(using FF3.5.1)
thanks for the big hint,
yg
yg
> The buttons disappear and reappear correctly but not the columns :-/
Some googling and it works !
cf http://bytes.com/groups/css/101076-display-property-colgroup
and others
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showcol(i) {
colid[i].style.visibility="";
colbt[i].style.display="none";
}
function hidecol(i) {
colid[i].style.visibility="collapse";
colbt[i].style.display="";
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Thanks to everyone for taking the time to answer and
thank you Alexandre for the great hint !
yg
Thomas 'PointedEars' Lahn
> Evertjan. wrote:
>> Now try this:
>>
>> <style type='text/css'>
>> body {margin:80px;}
>> table tr td {border:red 2px solid;font-size:15pt;}
>>
>> table.tabcol0 tr td.col1 {display:;}
>> table.tabcol0 tr td.col2 {display:;}
>> table.tabcol0 tr td.col3 {display:;}
>> table.tabcol1 tr td.col1 {display:none;}
>> table.tabcol1 tr td.col2 {display:;}
>> table.tabcol1 tr td.col3 {display:;}
>> table.tabcol2 tr td.col1 {display:;}
>> table.tabcol2 tr td.col2 {display:none;}
>> table.tabcol2 tr td.col3 {display:;}
>> table.tabcol3 tr td.col1 {display:;}
>> table.tabcol3 tr td.col2 {display:;}
>> table.tabcol3 tr td.col3 {display:none;}
>>
>> </style>
>
> heh, that's exactly what I try to avoid :-/
You definitely would want to, because that's not Valid.
Property values MUST NOT be omitted in CSS.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
Alexandre.Morgaut
> .hidden {
> display: none;}
>
> </style>
>
Yes of course its not required
I wrote this because its usually a better practice to change a class
whereas changing directly the style in that your code becomes more
evolutive
I'am waiting for the day all frameworks will use the same semantic in
their widget so I can apply common css skins to datagrids or calendars
from any of YUI, ExtJS, Script.aculo.us, ...
so you could have it as a more unobtrusive code :
Warning:
- Unfortunately, Firefox as a bug handling css on colgroups
- it works nearly well on IE 8 (I don't understand why the table
width isn't reduced)
This code is just an example of good practices, but Browsers lacks
makes it a little more complicated
So don't hesitate to use well designed frameworks like JQuery or YUI
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<html>
<head>
<title>Show / Hide columns</title>
<style type="text/css">
table th, table td {
width: 250px;
border: solid 1px black
}
caption {
border: solid 1px black
}
.hidden {
visibility: hidden;
}
.hiddenColumn {
visibility: hidden;
width: 0px;
display: none
}
#col1, #col3{
text-align: right
}
#col2 {
text-align: left
}
#col3 {
color: #0000FF;
}
</style>
</head>
<body>
<h1>Show / Hide columns</h1>
<table id="books">
<caption>books</caption>
<colgroup id="col1" />
<colgroup id="col2" />
<colgroup id="col3" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>3489632</td>
<td>My best HTML</td>
<td>$42</td>
</tr>
</table>
<h3>Show hidden columns</h3>
<p id="showColumns">
<button>show col 1</button>
<button>show col 2</button>
<button>show col 3</button>
</p>
<script type="text/javascript">
<!--
(function () {
var colHeads, colHead, colGroups, colGroup, nbCols, buttons, button,
i, byId, showColumn, hideColumn;
byId = function (id) {
var elem = document.getElementById(id);
elem.byName = elem.getElementsByTagName;
return elem;
}
colHeads = byId('books').rows[0].cells;
nbCols = colHeads.length;
colGroups = byId('books').byName('colgroup');
buttons = byId('showColumns').byName('button');
showColumn = function () {
// this is the button which has been clicked
this.col.className = '';
this.className = 'hidden';
};
hideColumn = function () {
// this is the column title which has been clicked
this.col.className = 'hiddenColumn';
this.button.className = '';
};
for (i = 0; i < nbCols; i += 1) {
colHead = colHeads[i];
colGroup = colGroups[i];
button = buttons[i];
colGroup.name = 'colGroup ' + i;
colHead.name = 'colHead ' + i;
colHead.onclick = hideColumn;
colHead.col = colGroup;
colHead.button = button
button.name = 'button ' + i;
button.onclick = showColumn;
button.col = colGroup;
button.className = 'hidden';
}
})();
//-->
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
whygee
Thomas 'PointedEars' Lahn wrote:
> whygee wrote:
>> heh, that's exactly what I try to avoid :-/
>
> You definitely would want to, because that's not Valid.
> Property values MUST NOT be omitted in CSS.
probably. However :
1) it works without (ok I know it's not a good argument)
2) the tables are cloneNode()ed so the properties are cloned too.
3) I am receptive to XYZ validity arguments, but it's not a requirement here.
4) default values are implicit, so why write them ?
5) when the original table is cloned, all the columns are visible.
I did not expect that the table structure would be changed so now
I have to cleanup the table scanning routines... Lesson learned.
Regards,
> PointedEars
whygee
Alexandre.Morgaut wrote:
>> <style> /* I'm not sure it's useful */
>> .hidden {
>> display: none;}
>> </style>
> Yes of course its not required
> I wrote this because its usually a better practice to change a class
> whereas changing directly the style in that your code becomes more
> evolutive
OK.
> Warning:
> - Unfortunately, Firefox as a bug handling css on colgroups
what is the consequence ?
> - it works nearly well on IE 8 (I don't understand why the table
> width isn't reduced)
maybe because you should use visibility="collapse" ?
Anyway, MSIE is not an issue for me,
I have chosen to favor feature
development over absolute portability.
Otherwise it would be like shooting a moving target
and I would end up having something working well
everywhere, but useless. I have been there already :-/
> This code is just an example of good practices, but Browsers lacks
> makes it a little more complicated
> So don't hesitate to use well designed frameworks like JQuery or YUI
I don't need or want to use them.
My project is already complex enough ;-)
> .hiddenColumn {
> visibility: hidden;
> width: 0px;
> display: none
> }
visibility="collapse" ?
BTW, interesting code, thank you very much your insight,
some aspects that I like are going to be reused soon :-)
yg
Thomas 'PointedEars' Lahn
> Thomas 'PointedEars' Lahn wrote:
>> whygee wrote:
>>> heh, that's exactly what I try to avoid :-/
>> You definitely would want to, because that's not Valid. Property values
>> MUST NOT be omitted in CSS.
>
> probably.
No, definitely, see <http://www.w3.org/TR/CSS2/grammar.html>. Observe there
that `stylesheet' produces `ruleset' (among other symbols) which produces
`selector' (a.o.) which produces `declaration' (a.o.) which produces `expr'
(a.o.) which produces `term' (a.o.) which does _not_ produce, through any
alternation, only the empty string (the terminal representing "nothing" in
formal grammars).
See also the result of <http://jigsaw.w3.org/css-validator> when applied to
your style-sheet.
> However : 1) it works without (ok I know it's not a good argument)
A masterpiece of understatement; it is the silliest possible reply of all.
Of course it may work without, because implementations need to handle such
silly author's mistakes for adequate presentation. The Specification even
defines how they MUST do this:
<http://www.w3.org/TR/CSS2/syndata.html#parsing-errors>
Nevertheless, errors are errors, and best avoided.
> 2) the tables are cloneNode()ed so the properties are cloned too.
That does not matter for the validity constraint.
> 3) I am receptive to XYZ validity arguments, but it's not a requirement
> here.
I beg your pardon? You do want your style-sheet to work reliably, do you not?
> 4) default values are implicit,
Some are implementation-dependent.
> so why write them ?
Because the declared and used style-sheet language, CSS, requires it.
> 5) when the original table is cloned, all the columns are visible.
Again, this has no relevance at all to the validity constraint.
Please do not quote signatures unless you refer to their content.
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Garrett Smith
> whygee wrote:
>> Thomas 'PointedEars' Lahn wrote:
>>> whygee wrote:
>>>> heh, that's exactly what I try to avoid :-/
>>> You definitely would want to, because that's not Valid. Property values
>>> MUST NOT be omitted in CSS.
>> probably.
>
> No, definitely, see <http://www.w3.org/TR/CSS2/grammar.html>. Observe there
> that `stylesheet' produces `ruleset' (among other symbols) which produces
> `selector' (a.o.) which produces `declaration' (a.o.) which produces `expr'
> (a.o.) which produces `term' (a.o.) which does _not_ produce, through any
> alternation, only the empty string (the terminal representing "nothing" in
> formal grammars).
>
> See also the result of <http://jigsaw.w3.org/css-validator> when applied to
> your style-sheet.
>
>> However : 1) it works without (ok I know it's not a good argument)
>
> A masterpiece of understatement; it is the silliest possible reply of all.
> Of course it may work without, because implementations need to handle such
> silly author's mistakes for adequate presentation. The Specification even
> defines how they MUST do this:
>
> <http://www.w3.org/TR/CSS2/syndata.html#parsing-errors>
>
The more pertinent portion of the specification is the next item, titled
"Malformed declarations"
| Malformed declarations. User agents must handle unexpected tokens
| encountered while parsing a declaration by reading until the end of
| the declaration, while observing the rules for matching pairs of (),
| [], {}, "", and '', and correctly handling escapes. For example, a
| malformed declaration may be missing a property, colon (:) or value.
| The following are all equivalent:
|
| p { color:green }
| p { color:green; color }/* malformed declaration missing ':', value */
| p { color:red; color; color:green }/* same with expected recovery */
| p { color:green; color: } /* malformed declaration missing value */
| p { color:red; color:; color:green }/* same with expected recovery */
| p { color:green; color{;color:maroon} } /* unexpected tokens { } */
| p {color:red;color{;color:maroon}; color:green }/*same with recovery*/
(Some of the allowed whitespace, was removed, so that the example could
be formatted to 72 characters).
The specification describes the expected error-handling procedure and
how a missing value is to be handled, providing a commented example.
The CSS parser should be expected to perform the specified error
correction. If and only if that error handling is performed correctly,
the result will be the invalid part of the code being ignored.
> Nevertheless, errors are errors, and best avoided.
>
Adding that error would increase the file size and increase the number
of errors issued by the validator, making debugging harder.
Garrett
--
comp.lang.javascript FAQ: http://jibbering.com/faq/
whygee
and thank you all for taking the time to explain me all this.
I come from domains that have nothing to do with
the subject of this newsgroup and I find the SNR
quite good here, so I decided to stay a bit and learn.
Garrett Smith wrote:
> Thomas 'PointedEars' Lahn wrote:
>> whygee wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> whygee wrote:
>>>>> heh, that's exactly what I try to avoid :-/
>>>> You definitely would want to, because that's not Valid. Property values
>>>> MUST NOT be omitted in CSS.
After the Nth proofreading, I finally understood what this leg of the thread is about.
Please excuse me if I'm mistaken again, as my brain is a bit crushed by the lack of sleep.
1) Evertjan wrote :
>>> table.tabcol0 tr td.col1 {display:;}
>>> table.tabcol0 tr td.col2 {display:;}
>>> table.tabcol0 tr td.col3 {display:;}
>>> table.tabcol1 tr td.col1 {display:none;}
>>> table.tabcol1 tr td.col2 {display:;}
etc.
2) I complained because I don't want / can't write in advance
the CSS properties of each column of each table that will ever be used,
or else i'll have to make a gigabyte-sized .css
in order to cover any corner case and/or put artificial
size limitations to my code...
2") Thomas complained for something else, if I understand correctly :
it's about the syntax (hence the description of the BNF below) because
>>> table.tabcol0 tr td.col3 {display:;}
is invalid.
That's also why I thought that Evertjan's proposition
was to be avoided : if the value is not given, then the selector is
useless and can be skipped entirely, so I don't have to write the
whole line. Hence my remark later about default values too,
as well as the cloning of the properties.
In my code, I just have to create one correct table with one
correct CSS, and the user interactions will clone then modify the
table and the associated properties, no need of hundred of CSS lines.
Now, the rest of the thread makes new and better sense to me,
and I agree with Garrett & Thomas. However I still don't understand
why Evertjan wrote the code in the first place. OTOH, Evertjan
doesn't understand that I don't create the tables server-side,
which is a completely different issue (going almost completely
serverside-less is a design choice that pays well for me).
>>> probably.
>> No, definitely, see <http://www.w3.org/TR/CSS2/grammar.html>.
<snip>
>> See also the result of <http://jigsaw.w3.org/css-validator> when
>> applied to your style-sheet.
I'll check this soon, for the rest of my project.
>>> However : 1) it works without (ok I know it's not a good argument)
>> A masterpiece of understatement; it is the silliest possible reply of all.
from here on, the misunderstanding gets very thick as we don't speak
about the same thing.
>> <http://www.w3.org/TR/CSS2/syndata.html#parsing-errors>
> The more pertinent portion of the specification is the next item, titled
> "Malformed declarations"
> | Malformed declarations. User agents must handle unexpected tokens
> | encountered while parsing a declaration by reading until the end of
> | the declaration, while observing the rules for matching pairs of (),
> | [], {}, "", and '', and correctly handling escapes. For example, a
> | malformed declaration may be missing a property, colon (:) or value.
<snip>
Here is the hint about what went wrong in the discussion.
I thought that Thomas & Garrett promoted the heavy use
of explicit declaration of every CSS property possible,
until I see that they speak about a lower-level syntax aspect.
>> Nevertheless, errors are errors, and best avoided.
> Adding that error would increase the file size and increase the number
> of errors issued by the validator, making debugging harder.
This makes sense to me now :-)
> Garrett
Thomas 'PointedEars' Lahn
> Thomas 'PointedEars' Lahn wrote:
>> whygee wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> whygee wrote:
>>>>> heh, that's exactly what I try to avoid :-/
>>>> You definitely would want to, because that's not Valid. Property values
>>>> MUST NOT be omitted in CSS.
>>> probably.
>> No, definitely, see <http://www.w3.org/TR/CSS2/grammar.html>. Observe there
>> that `stylesheet' produces `ruleset' (among other symbols) which produces
>> `selector' (a.o.) which produces `declaration' (a.o.) which produces `expr'
>> (a.o.) which produces `term' (a.o.) which does _not_ produce, through any
>> alternation, only the empty string (the terminal representing "nothing" in
>> formal grammars).
>>
>> See also the result of <http://jigsaw.w3.org/css-validator> when applied to
>> your style-sheet.
>>
>>> However : 1) it works without (ok I know it's not a good argument)
>> A masterpiece of understatement; it is the silliest possible reply of all.
>> Of course it may work without, because implementations need to handle such
>> silly author's mistakes for adequate presentation. The Specification even
>> defines how they MUST do this:
>>
>> <http://www.w3.org/TR/CSS2/syndata.html#parsing-errors>
>
> The more pertinent portion of the specification is the next item, titled
The URL provided above refers to CSS 2.1 (CR), section 4.2 "Rules for
handling parsing errors" which includes the so-called "next item".
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300...@news.demon.co.uk>
Evertjan.
> 1) Evertjan wrote :
>>>> table.tabcol0 tr td.col1 {display:;}
>>>> table.tabcol0 tr td.col2 {display:;}
>>>> table.tabcol0 tr td.col3 {display:;}
>>>> table.tabcol1 tr td.col1 {display:none;}
>>>> table.tabcol1 tr td.col2 {display:;}
> etc.
>
> 2) I complained because I don't want / can't write in advance
> the CSS properties of each column of each table that will ever be used,
> or else i'll have to make a gigabyte-sized .css
> in order to cover any corner case and/or put artificial
> size limitations to my code...
As I answered, the code aplies to all tables, not to a single one.
>
> 2") Thomas complained for something else, if I understand correctly :
> it's about the syntax (hence the description of the BNF below) because
> >>> table.tabcol0 tr td.col3 {display:;}
> is invalid.
>
> That's also why I thought that Evertjan's proposition
> was to be avoided : if the value is not given, then the selector is
> useless and can be skipped entirely,
You thought wrongly.
Did you really try my code?
You would have seen that the selector is not useless,
try leaving it out.
using {display:;} can be replaced by {display:block;},
pleasing purists like Pointed, but since this is the default,
present day browsers would do the default anyway.
> so I don't have to write the
> whole line. Hence my remark later about default values too,
> as well as the cloning of the properties.
> In my code, I just have to create one correct table with one
> correct CSS, and the user interactions will clone then modify the
> table and the associated properties, no need of hundred of CSS lines.
the <colgroup> option was not knoen to me, but the principle of renaming
the class of the table identified by it's id was my goal.
> Now, the rest of the thread makes new and better sense to me,
> and I agree with Garrett & Thomas. However I still don't understand
> why Evertjan wrote the code in the first place.
> OTOH, Evertjan
> doesn't understand that I don't create the tables server-side,
> which is a completely different issue
Are you being willfully nasty?
Why should I not understand what you did not state?
My serverside example just shortens your programming effort,
the html sent to the client is not different from the full
CSS.
Furthermore my response was not only for your benifit, as I would have
emailed it, but for the interested memberreaders of this NG as a whole.
> (going almost completely
> serverside-less is a design choice that pays well for me).
"almost completely", so you have access to it!
It must be that it pays of in your not willing to learn serverside
coding, as serverside coding only simpifies the task of webside
programming and so reduces programming time and effort.
whygee
Evertjan. wrote:
> You thought wrongly.
>
> Did you really try my code?
>
> You would have seen that the selector is not useless,
> try leaving it out.
>
> using {display:;} can be replaced by {display:block;},
> pleasing purists like Pointed, but since this is the default,
> present day browsers would do the default anyway.
I have found that "visibility:collapse"
is the right way to deal with <colgroup>.
I have even seen that no additional .css or <style>
is required for my code to work (the <td> already
have their own classes, wich are used by JS to find
their types). I just have to modify the table scanning
routines, since some old assumptions don't hold, that's all.
For me, the issue is closed.
>> so I don't have to write the
>> whole line. Hence my remark later about default values too,
>> as well as the cloning of the properties.
>> In my code, I just have to create one correct table with one
>> correct CSS, and the user interactions will clone then modify the
>> table and the associated properties, no need of hundred of CSS lines.
>
> the <colgroup> option was not knoen to me, but the principle of renaming
> the class of the table identified by it's id was my goal.
well, if I understand correctly, if my table has N columns,
then there must be N*N style declarations to deal with the cases
where any of the columns is hidden.
If any combination must be possible, there must be N*2^N lines.
It works for small tables but it is clearly not scalable,
adding a new column will be a manual error-prone process.
OTOH, thanks to Alexandre, an unobstrusive prototype is working
and no additional CSS is required. It's scalable and ideal for my case.
>> OTOH, Evertjan
>> doesn't understand that I don't create the tables server-side,
>> which is a completely different issue
> Are you being willfully nasty?
no. I just want to separate the original (and solved) problem
from discussions about things that already work.
> Why should I not understand what you did not state?
If I used server-side code, I would not care about
using JS to hide a column...
You can have a look at the first page at http://yasep.org
which, I hope, explains why it looks like a "website"
but it is not limited to this form.
> Furthermore my response was not only for your benifit, as I would have
> emailed it, but for the interested memberreaders of this NG as a whole.
fine.
>> (going almost completely
>> serverside-less is a design choice that pays well for me).
> "almost completely", so you have access to it!
Yes, I use a server to host the site, and PHP is available.
But if it's available, it does not mean that I'm /forced/ to use it.
The only place where I use PHP is because I can't do without
/and/ it is not critical to the project :
http://yasep.org/tools/generate_VHDL.html which uses
http://yasep.org/JSgui/test_filefox.html
It is designed to work on any server (even with a local server).
That's all. Anyone can load the .tgz of the project and
use it on his computer, no need to install anything else than Firefox.
Those who want to use filefox have to install a Apache or EasyPHP.
And there is even failsafe JS code that works when PHP is not available
(it's just less user-friendly).
> It must be that it pays of in your not willing to learn serverside
> coding, as serverside coding only simpifies the task of webside
> programming and so reduces programming time and effort.
"not willing to learn ss coding" => I started the project with PHP
but soon reached latency and server load limitations.
Since I'm not doing a "classic web site" I switched to JS-only and although
the pages load a bit slower, the functionalities and performance are much, much better.
In this project I favor interactivity, the possibility to work without
server (without even Internet connection) and if the project is hosted
on a server, then it must be loaded as little as possible.
This is completely different from "usual websites" that do online retail,
for example.
regards, peace, hapiness & bugless code,
whygee
I'm analysing the code a bit more and a few things now catch my eye.
Alexandre.Morgaut wrote:
> (function () {
<snip>
> })();
Is there any benefit for this construct,
except for the separation of the scope ?
> byId = function (id) {
> var elem = document.getElementById(id);
> elem.byName = elem.getElementsByTagName;
> return elem;
> }
https://developer.mozilla.org/fr/DOM/document.getElementsByTagName
says that getElementsByTagName requires a parameter
(the type of tag). So in fact you return a function.
Is it a way to reduce the code size by avoiding calls to getElementsByTagName
in the rest of the code ?
> colHeads = byId('books').rows[0].cells;
I never used the .rows[x] syntax before,
this is going to help me make my code simpler
(I relied on .nextSibling, .firstChild etc.
and it's a bit fragile)
Anyway, this piece of code is not obvious but
it is very nice one. I hope that I will soon
raise my JS coding standards up to that.
yg
whygee
> Warning:
> - Unfortunately, Firefox as a bug handling css on colgroups
Compare http://yasep.org/tools/2/listed.html with
the original http://yasep.org/tools/listed.html
Any border of a TD would remain at the same place,
while the background of a hidden column disappears,
which leaves annoying and mistaking traces.
So I disabled the borders...
> - it works nearly well on IE 8 (I don't understand why the table
> width isn't reduced)
Opera does not react to display:collapse
Fortunately, hiding columns is not a critical feature.
> This code is just an example of good practices, but Browsers lacks
> makes it a little more complicated
> So don't hesitate to use well designed frameworks like JQuery or YUI
I'll keep the current code for now, there are more important features to add now.
yg
Alexandre.Morgaut
> Alexandre.Morgaut wrote:
> > (function () {
>
> <snip>
> > })();
> Is there any benefit for this construct,
> except for the separation of the scope ?
This construct is important because using it, all variables are
declared locally and not in the global scope
Note that doing so, once all handlers have been set on the HTML
elements, all these variables can be removed from memory, even
functions like "byId", (unless they are used by some handlers).
All the more, if you use some local variables of this function in your
handlers, these ones can be used like private properties only shared
by these handlers
> > byId = function (id) {
> > var elem = document.getElementById(id);
> > elem.byName = elem.getElementsByTagName;
> > return elem;
> > }
>
> https://developer.mozilla.org/fr/DOM/document.getElementsByTagName
> says that getElementsByTagName requires a parameter
> (the type of tag). So in fact you return a function.
> Is it a way to reduce the code size by avoiding calls to getElementsByTagName
> in the rest of the code ?
This function is only a little helper which allows you to write code
quicker and more readable
The size rarely really matter as, all the more for repetitive text, as
you can make it compressed automatically by your HTTP server (content-
Encoding: gzip)
> > colHeads = byId('books').rows[0].cells;
>
> I never used the .rows[x] syntax before,
> this is going to help me make my code simpler
> (I relied on .nextSibling, .firstChild etc.
> and it's a bit fragile)
Yes DOM methods aren't very user Friendly
JavaScript provide a useful interface to access Forms and Tables
elements
I like this little tree :
http://www.howtocreate.co.uk/tutorials/javascript/domtables
For more details :
http://www.w3schools.com/htmldom/dom_obj_table.asp
http://www.w3schools.com/htmldom/dom_obj_tablerow.asp
http://www.w3schools.com/htmldom/dom_obj_tabledata.asp
Notes :
- you put your head row in the <tbody> instead of a <thead>
- there is a <col> element which could be more accurate than
<colgroup> (sorry, I know, it cames from my example)
- Using HTML templates is a very good idea, I recommand it for any
widgets,
- This template could have been loaded from an Ajax request to a
specific file becoming then more cachable
- Try to use <caption> on tables as often as you can, and setting the
"sumary" attribute is also a good practice
- You don't need the "trash_div", you can set "trash_div" CSS rules
directly on the "trash_image"
> Anyway, this piece of code is not obvious but
> it is very nice one. I hope that I will soon
> raise my JS coding standards up to that.
>
I hope I'll have the occasion to expose some more good parts ;-)
First of all, try to validate your JavaScript code on http://www.jslint.com,
and your html code on http://validator.w3.org
You will learn a lot of useful things
Thomas 'PointedEars' Lahn
> [...]
> This code is just an example of good practices, but Browsers lacks
> makes it a little more complicated
Not understanding browser scripting makes it look complicated.
> So don't hesitate to use well designed frameworks like JQuery or YUI
You must be joking.
David Mark
Actually, I closed mine down. His is there (at the moment anyway.)
Also, I was looking at addStyleRule recently and spotted some
potential disasters in the feature detection (tests host addRule/
insertRule methods by type conversion of all things.)
[snip]
David Mark
> > <style> /* I'm not sure it's useful */
> > .hidden {
> > display: none;}
>
> > </style>
>
> Yes of course its not required
> I wrote this because its usually a better practice to change a class
> whereas changing directly the style in that your code becomes more
> evolutive
>
> I'am waiting for the day all frameworks will use the same semantic in
> their widget so I can apply common css skins to datagrids or calendars
That presumes you would use at least two frameworks in a single
document.
> from any of YUI, ExtJS, Script.aculo.us, ...
>
The last is not a framework but a plug-in for Prototype (which is a
terrible script.) I'd avoid all of these like the plague. Using more
than one at a time is certainly madness.
[snip]
David Mark
> > .hidden {
> > display: none;}
>
> > </style>
>
> Yes of course its not required
> I wrote this because its usually a better practice to change a class
> whereas changing directly the style in that your code becomes more
> evolutive
>
> I'am waiting for the day all frameworks will use the same semantic in
> their widget so I can apply common css skins to datagrids or calendars
> from any of YUI, ExtJS, Script.aculo.us, ...
>
> so you could have it as a more unobtrusive code :
>
> Warning:
> - Unfortunately, Firefox as a bug handling css on colgroups
> - it works nearly well on IE 8 (I don't understand why the table
> width isn't reduced)
>
> This code is just an example of good practices, but Browsers lacks
> makes it a little more complicated
> So don't hesitate to use well designed frameworks like JQuery or YUI
>
[snip]
Sorry, missed this before. The jQuery script is neither well-
designed, nor a framework. I'll concede that YUI is a framework.
Eric Bednarz
> - Unfortunately, Firefox as a bug handling css on colgroups
What bug, which version? Doing a superficial test, the four CSS
properties that apply to col and colgroup elements work for me (if the
constraints are met).
whygee
I have the following problem with FF3.5.1 and others
(Opera and Seamonkey are worse), look yourself :
http://yasep.org/~whygee/colgroup.html
http://yasep.org/~whygee/colgroup_bork.html
One version displays correctly, the other preserves the border
of the hidden cells at the old place :-/
The only difference is the style of the main table :
<table style="border-collapse: collapse">
hope this helps,
Narda
> Evertjan. schreef:
>
> > whygee wrote on 20 jul 2009 in comp.lang.javascript:
>
> >> Evertjan. wrote:
> >>> to the whims of each programmer.
> >> I understand. However, I often discover "customs", "good practices"
> >> etc.
>
> >>> I see two ways:
>
> > Now try this:
>
> > ==================================
>
> > <style type='text/css'>
> > body {margin:80px;}
> > table tr td {border:red 2px solid;font-size:15pt;}
>
> > table.tabcol0 tr td.col2 {display:;}
> > table.tabcol0 tr td.col3 {display:;}
> > table.tabcol1 tr td.col1 {display:none;}
> > table.tabcol1 tr td.col2 {display:;}
> > table.tabcol2 tr td.col1 {display:;}
> > table.tabcol2 tr td.col2 {display:none;}
> > table.tabcol2 tr td.col3 {display:;}
> > table.tabcol3 tr td.col1 {display:;}
> > table.tabcol3 tr td.col2 {display:;}
> > table.tabcol3 tr td.col3 {display:none;}
>
> > </style>
>
> > function hide(table,row) {
> > document.getElementById(table).className = 'tabcol'+row;
> > };
> > </script>
>
> > <table id='t1' class='tabcol0' border=1>
> > <tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
> > <tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
> > <tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
> > </table>
> > <br><br>
>
> > <table id='t2' class='tabcol0' border=1>
> > <tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
> > <tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
> > <tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
> > <tr><td class='col1'>A<td class='col2'>B<td class='col3'>C
> > </table>
> > <br><br>
>
> > <button onclick='hide("t1",3);'>
> > hide columm C of the first table</button>
> > <br><br>
>
> > <button onclick='hide("t2",2);'>
> > hide columm B of the second table</button>
> > <br><br>
>
> > <button onclick='hide("t2",1);'>
> > hide columm A of the second table</button>
> > <br><br>
>
> > <button onclick='hide("t1",0);hide("t2",0);'>
> > Show all in both tables</button>
>
> > ==================================
>
> > Tested working on Chrome ;-)
>
> also works in IE8 and FireFox3.5.1
>
> --
> Luuk
This IS the best, simplest way of hiding columns... and easy to modify
to hide rows as well, thanks
kumarch...@gmail.com
-thanks
Leo
Denis McMahon
> Hi, the above code is not working . could you please check it and
> updates us. its really useful to us.
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, denismf...@gmail.com
Denis McMahon
> updates us. its really useful to us.
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, denismf...@gmail.com
Evertjan.
> 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";
>}
<!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>
Thomas 'PointedEars' Lahn
> 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";
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.
Denis McMahon
> Denis McMahon wrote on 10 dec 2013 in comp.lang.javascript:
>> row in a table
> no need for a loop [chrome tested]:
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, denismf...@gmail.com
Hans-Georg Michna
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
Joao Rodrigues
<snip>
> click on table to toggle row 2
column 2
--
Joao Rodrigues (J.R.)
Joao Rodrigues
> 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;
> }
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”.
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.
>
--
Joao Rodrigues (J.R.)
Thomas 'PointedEars' Lahn
> 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; }
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;
>> /* 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,
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.
suggested that it is intended to. You are jumping to conclusions again.
Denis McMahon
> Em 10/12/2013 20:35, Evertjan wrote:
>
> <snip>
>> </table>
>> click on table to toggle row 2
> ^^^ column 2
--
Denis McMahon, denismf...@gmail.com
Denis McMahon
> Em 10/12/2013 21:22, Thomas 'PointedEars' Lahn escreveu:
> Considering your "strictly conforming implementations of ECMAScript", it
> could be just:
> if (h === undefined) { h = true; }
> or
> h = h || true;
h = h (false) || true;
so h = true;
This would (in this code) prevent hidden columns being unhidden.
--
Denis McMahon, denismf...@gmail.com
Joao Rodrigues
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
Nisse Engström
> 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?
<http://www.w3.org/TR/CSS21/tables.html#columns>:
"The following properties apply to column and column-group elements:
'border' ...
'background' ...
'width' ...
'visibility' ... "
/Nisse