Re: COL element, DOM
"John M. Hann" <[email protected]> Thu, 29 Mar 2007 13:35:11 -0000
| Newsgroups | gmane.comp.web.dom.wdf |
|---|---|
| Message-ID | <[email protected]> |
--2yFPcNoVcvPF2DJtWrOpE1jv2KY1wUKlIj3vX-j
Content-Type: text/plain; charset=US-ASCII
Content-Transfer-Encoding: 7bit
Hello N,
COLs do not have children. However, setting their properties affects
cells in the table that have the same column position. Unfortunately,
only Mozilla follows the standards exactly. There are some
work-arounds.
Given the following example HTML:
<table id="table1">
<col span="1" id="col1"/>
<col span="1" id="col2"/>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
You can collapse the first column in Mozilla or IE like this:
var col = $('col1'); // using popular $ shortcut function
if (Browser.isGecko) // use your own browser detection here!
col.style.visibility = 'collapse'; // W3C way
else
col.style.display = 'none'; // IE way
Safari does not seem to support the COL or COLGROUP tags. (Anyone ever
get Safari to support these? Is there something I am missing?) If you
loop through the rows/cells in Safari and set the display = 'none', it
will work as you expect. Safari only hides the cells (but does not
collapse them) when using visibility = 'collapse'.
var rows = $('table1').rows;
for (var r = 0; r < rows.length; r++)
r.cells[0].style.display = 'none'; // substitute your column # here
Regards,
-- John Hann
http://e-numera.com/
http://unscriptable.com/
--- In [email protected], "pepe_grillo_66" <turkox@...> wrote:
>
> Hi,
>
> i wanted to know if there are any published documents on accessing and
modifying COL
> elements through dom, i am interested in knowing if COL elements have
TD's as childs...
>
> I am currently working on a hide/show column feature for a data grid
widget and was trying
> to avoid iterating through each row.
>
> Bye, Thanks
>
> N
>
[Non-text portions of this message have been removed]
--2yFPcNoVcvPF2DJtWrOpE1jv2KY1wUKlIj3vX-j
Content-Type: text/html; charset=US-ASCII
Content-Transfer-Encoding: 7bit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<!-- Network content -->
<body style="background-color: #ffffff;">
<!--~-|**|PrettyHtmlStartT|**|-~-->
<div id="ygrp-mlmsg" style="width:655px; position:relative;">
<div id="ygrp-msg" style="width: 490px; padding: 0 15px 0 0; float:left; z-index:1;">
<!--~-|**|PrettyHtmlEndT|**|-~-->
<div id="ygrp-text">
<p>Hello N,<br>
<br>
COLs do not have children. However, setting their properties affects<br>
cells in the table that have the same column position. Unfortunately,<br>
only Mozilla follows the standards exactly. There are some<br>
work-arounds.<br>
<br>
Given the following example HTML:<br>
<br>
<table id="table1"><br>
<col span="1" id="col1"/><br>
<col span="1" id="col2"/><br>
<tbody><br>
<tr><br>
<td>1</td><br>
<td>2</td><br>
</tr><br>
</tbody><br>
</table><br>
<br>
You can collapse the first column in Mozilla or IE like this:<br>
<br>
var col = $('col1'); // using popular $ shortcut function<br>
if (Browser.isGecko) // use your own browser detection here!<br>
col.style.visibilit<wbr>y = 'collapse'; // W3C way<br>
else<br>
col.style.display = 'none'; // IE way<br>
<br>
Safari does not seem to support the COL or COLGROUP tags. (Anyone ever<br>
get Safari to support these? Is there something I am missing?) If you<br>
loop through the rows/cells in Safari and set the display = 'none', it<br>
will work as you expect. Safari only hides the cells (but does not<br>
collapse them) when using visibility = 'collapse'.<br>
<br>
var rows = $('table1').<wbr>rows;<br>
for (var r = 0; r < rows.length; r++)<br>
r.cells[0].style.<wbr>display = 'none'; // substitute your column # here<br>
<br>
Regards,<br>
<br>
-- John Hann<br>
<a href="http://e-numera.com/">http://e-numera.<wbr>com/</a><br>
<a href="http://unscriptable.com/">http://unscriptable<wbr>.com/</a><br>
<br>
--- In <a href="mailto:wdf-dom%40yahoogroups.com">wdf-dom@yahoogroups<wbr>.com</a>, "pepe_grillo_<wbr>66" <turkox@...> wrote:<br>
><br>
> Hi,<br>
><br>
> i wanted to know if there are any published documents on accessing and<br>
modifying COL<br>
> elements through dom, i am interested in knowing if COL elements have<br>
TD's as childs...<br>
><br>
> I am currently working on a hide/show column feature for a data grid<br>
widget and was trying<br>
> to avoid iterating through each row.<br>
><br>
> Bye, Thanks<br>
><br>
> N<br>
><br>
<br>
[Non-text portions of this message have been removed]<br>
<br>
</p>
</div>
<!--~-|**|PrettyHtmlStart|**|-~-->
<span width="1" style="color: white;">__._,_.___</span>
<!-- Start the section with Message In topic -->
<div id="ygrp-actbar">
<span class="left">
<a href="http://groups.yahoo.com/group/wdf-dom/message/5581;_ylc=X3oDMTM0bjRtcXRvBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU1ODgEc2VjA2Z0cgRzbGsDdnRwYwRzdGltZQMxMTc1MTc1MzY2BHRwY0lkAzU1ODE-">
Messages in this topic </a> (<span class="bld">0</span>)
</span>
<a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJwcmM3aHZlBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU1ODgEc2VjA2Z0cgRzbGsDcnBseQRzdGltZQMxMTc1MTc1MzY2?act=reply&messageNum=5588">
<span class="bld">
Reply </span> (via web post)
</a> |
<a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJlZ3A4a2o2BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA250cGMEc3RpbWUDMTE3NTE3NTM2Ng--" class="bld">
Start a new topic </a>
</div>
<!------- Start Nav Bar ------>
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-vitnav">
<a href="http://groups.yahoo.com/group/wdf-dom/messages;_ylc=X3oDMTJlN2ZlaDg4BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA21zZ3MEc3RpbWUDMTE3NTE3NTM2Ng--">Messages</a>
</div>
<!-- |**|end egp html banner|**| -->
<!-- Do not have place to put it yet -->
<div id="ygrp-grft">
</div>
<!-- yahoo logo -->
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-ft">
<a href="http://groups.yahoo.com/;_ylc=X3oDMTJkdjJxOWFiBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxMTc1MTc1MzY2">
<img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/logo/ma_grp_160.gif" height="15" width="106" border="0" alt="Yahoo! Groups"></a> <br>
<a href="http://groups.yahoo.com/group/wdf-dom/join;_ylc=X3oDMTJmbm45YzhyBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA3N0bmdzBHN0aW1lAzExNzUxNzUzNjY-">Change settings via the Web</a> (Yahoo! ID required) <br>
Change settings via email: <a href="mailto:[email protected]?subject=Email Delivery: Digest">Switch delivery to Daily Digest</a> | <a href = "mailto:[email protected]?subject=Change Delivery Format: Traditional">Switch format to Traditional</a> <br>
<a href="http://groups.yahoo.com/group/wdf-dom;_ylc=X3oDMTJkdGg1NTk3BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2hwZgRzdGltZQMxMTc1MTc1MzY2">
Visit Your Group
</a> |
<a href="http://docs.yahoo.com/info/terms/">
Yahoo! Groups Terms of Use </a> |
<a href="mailto:[email protected]?subject=">
Unsubscribe </a>
</div> <!-- |**|end egp html banner|**| -->
</div> <!-- ygrp-msg -->
<!-- Sponsor -->
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-sponsor" style="width:140px;float: left; clear: none; margin-left: 5px; background:white; margin-bottom:25px ;position:absolute; top:0; right: 0;">
<!-- Network content -->
<!-- Start vitality -->
<div id="ygrp-vital">
<div id="vithd">Recent Activity</div>
<ul style="list-style-type:none; padding: 0; margin: 2px 0;">
<li style="clear: both;">
<div class="ct" style="float: right;"><span style="display:none"> </span>2</div>
<div class="cat"><a href="http://groups.yahoo.com/group/wdf-dom/members;_ylc=X3oDMTJmMnVqdDhmBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzExNzUxNzUzNjY-">New Members</a></div>
</li>
</ul>
<a href="http://groups.yahoo.com/group/wdf-dom;_ylc=X3oDMTJlb2cwODM4BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTE3NTE3NTM2Ng--">
Visit Your Group </a>
</div>
<div id="hd">SPONSORED LINKS</div>
<div id="ov">
<ul>
<li><a href="http://groups.yahoo.com/gads;_ylc=X3oDMTJjNXJiaGRvBF9TAzk3MzU5NzE0BF9wAzEEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA3NsbW9kBHN0aW1lAzExNzUxNzUzNjY-?t=ms&k=Dom+perignon&w1=Dom+perignon&w2=Dom+pedro+lisboa&w3=Dom+pedro+lisboa+hotel&w4=Dom+henrique+hotel&w5=Dom+pedro+hotel&c=5&s=113&g=2&.sig=WWEKoFu9o5Bxb7jvKiowcw">Dom perignon</a></li>
<li><a href="http://groups.yahoo.com/gads;_ylc=X3oDMTJjazJhMzZjBF9TAzk3MzU5NzE0BF9wAzIEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA3NsbW9kBHN0aW1lAzExNzUxNzUzNjY-?t=ms&k=Dom+pedro+lisboa&w1=Dom+perignon&w2=Dom+pedro+lisboa&w3=Dom+pedro+lisboa+hotel&w4=Dom+henrique+hotel&w5=Dom+pedro+hotel&c=5&s=113&g=2&.sig=SX1uIQiq6MaAcniDtSkcsg">Dom pedro lisboa</a></li>
<li><a href="http://groups.yahoo.com/gads;_ylc=X3oDMTJjMmozaWQ3BF9TAzk3MzU5NzE0BF9wAzMEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA3NsbW9kBHN0aW1lAzExNzUxNzUzNjY-?t=ms&k=Dom+pedro+lisboa+hotel&w1=Dom+perignon&w2=Dom+pedro+lisboa&w3=Dom+pedro+lisboa+hotel&w4=Dom+henrique+hotel&w5=Dom+pedro+hotel&c=5&s=113&g=2&.sig=guNaksJ68_6B0OiXpwey1w">Dom pedro lisboa hotel</a></li>
<li><a href="http://groups.yahoo.com/gads;_ylc=X3oDMTJjYXVkZHZtBF9TAzk3MzU5NzE0BF9wAzQEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA3NsbW9kBHN0aW1lAzExNzUxNzUzNjY-?t=ms&k=Dom+henrique+hotel&w1=Dom+perignon&w2=Dom+pedro+lisboa&w3=Dom+pedro+lisboa+hotel&w4=Dom+henrique+hotel&w5=Dom+pedro+hotel&c=5&s=113&g=2&.sig=QGH9qb7jsBAkFrK0-a_YNg">Dom henrique hotel</a></li>
<li><a href="http://groups.yahoo.com/gads;_ylc=X3oDMTJjMWM3YnZ0BF9TAzk3MzU5NzE0BF9wAzUEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA3NsbW9kBHN0aW1lAzExNzUxNzUzNjY-?t=ms&k=Dom+pedro+hotel&w1=Dom+perignon&w2=Dom+pedro+lisboa&w3=Dom+pedro+lisboa+hotel&w4=Dom+henrique+hotel&w5=Dom+pedro+hotel&c=5&s=113&g=2&.sig=lzPOttQs63hr5OcSewgvGQ">Dom pedro hotel</a></li>
</ul>
</div>
<!-- Network content -->
<div id="nc">
<div class="ad">
<div id="hd1">Yahoo! Photos</div>
<p><a href="http://us.ard.yahoo.com/SIG=12ioul7fs/M=493064.9803230.10510224.8674578/D=groups/S=1705016061:NC/Y=YAHOO/EXP=1175182566/A=3848634/R=0/SIG=10p8tommg/*http://photos.yahoo.com">Order at Yahoo!</a></p>
<p>Pick up at Target</p> </div>
<div class="ad">
<div id="hd1">Y! GeoCities</div>
<p><a href="http://us.ard.yahoo.com/SIG=12i0r6e75/M=493064.9803219.10510212.8674578/D=groups/S=1705016061:NC/Y=YAHOO/EXP=1175182566/A=3848542/R=0/SIG=12ban20bv/*http://us.rd.yahoo.com/evt=42416/*http://geocities.yahoo.com/ps/y360/?v=f">Share More</a></p>
<p>Create a blog, web</p>
<p>site, and more.</p> </div>
<div class="ad">
<div id="hd1">Yahoo! Groups</div>
<p><a href="http://groups.yahoo.com/start;_ylc=X3oDMTJvYzQwa3U5BF9TAzk3MzU5NzE0BF9wAzMEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA25jbW9kBHNsawNncm91cHMyBHN0aW1lAzExNzUxNzUzNjY-">Start a group</a></p>
<p>in 3 easy steps.</p>
<p>Connect with others.</p>
</div>
</div>
</div> <!-- |**|end egp html banner|**| -->
<div style="clear:both; color: #FFF; font-size:1px;">.</div>
</div> <img src="http://geo.yahoo.com/serv?s=97359714/grpId=2564563/grpspId=1705016061/msgId=5588/stime=1175175366/nc1=3848634/nc2=3848542/nc3=3" width="1" height="1"> <br>
<span style="color: white;">__,_._,___</span>
<!--~-|**|PrettyHtmlEnd|**|-~-->
</body>
<!--~-|**|PrettyHtmlStart|**|-~-->
<head>
<style type="text/css">
<!--
#ygrp-mlmsg {font-size:13px; font-family: arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
#ygrp-mlmsg table {font-size:inherit;font:100%;}
#ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
#ygrp-mlmsg pre, code {font:115% monospace;*font-size:100%;}
#ygrp-mlmsg * {line-height:1.22em;}
#ygrp-text{
font-family: Georgia;
}
#ygrp-text p{
margin: 0 0 1em 0;
}
#ygrp-tpmsgs{
font-family: Arial;
clear: both;
}
#ygrp-vitnav{
padding-top: 10px;
font-family: Verdana;
font-size: 77%;
margin: 0;
}
#ygrp-vitnav a{
padding: 0 1px;
}
#ygrp-actbar{
clear: both;
margin: 25px 0;
white-space:nowrap;
color: #666;
text-align: right;
}
#ygrp-actbar .left{
float: left;
white-space:nowrap;
}
.bld{font-weight:bold;}
#ygrp-grft{
font-family: Verdana;
font-size: 77%;
padding: 15px 0;
}
#ygrp-ft{
font-family: verdana;
font-size: 77%;
border-top: 1px solid #666;
padding: 5px 0;
}
#ygrp-mlmsg #logo{
padding-bottom: 10px;
}
#ygrp-vital{
background-color: #e0ecee;
margin-bottom: 20px;
padding: 2px 0 8px 8px;
}
#ygrp-vital #vithd{
font-size: 77%;
font-family: Verdana;
font-weight: bold;
color: #333;
text-transform: uppercase;
}
#ygrp-vital ul{
padding: 0;
margin: 2px 0;
}
#ygrp-vital ul li{
list-style-type: none;
clear: both;
border: 1px solid #e0ecee;
}
#ygrp-vital ul li .ct{
font-weight: bold;
color: #ff7900;
float: right;
width: 2em;
text-align:right;
padding-right: .5em;
}
#ygrp-vital ul li .cat{
font-weight: bold;
}
#ygrp-vital a {
text-decoration: none;
}
#ygrp-vital a:hover{
text-decoration: underline;
}
#ygrp-sponsor #hd{
color: #999;
font-size: 77%;
}
#ygrp-sponsor #ov{
padding: 6px 13px;
background-color: #e0ecee;
margin-bottom: 20px;
}
#ygrp-sponsor #ov ul{
padding: 0 0 0 8px;
margin: 0;
}
#ygrp-sponsor #ov li{
list-style-type: square;
padding: 6px 0;
font-size: 77%;
}
#ygrp-sponsor #ov li a{
text-decoration: none;
font-size: 130%;
}
#ygrp-sponsor #nc {
background-color: #eee;
margin-bottom: 20px;
padding: 0 8px;
}
#ygrp-sponsor .ad{
padding: 8px 0;
}
#ygrp-sponsor .ad #hd1{
font-family: Arial;
font-weight: bold;
color: #628c2a;
font-size: 100%;
line-height: 122%;
}
#ygrp-sponsor .ad a{
text-decoration: none;
}
#ygrp-sponsor .ad a:hover{
text-decoration: underline;
}
#ygrp-sponsor .ad p{
margin: 0;
}
o {font-size: 0; }
.MsoNormal {
margin: 0 0 0 0;
}
#ygrp-text tt{
font-size: 120%;
}
blockquote{margin: 0 0 0 4px;}
.replbq {margin:4}
-->
</style>
</head>
<!--~-|**|PrettyHtmlEnd|**|-~-->
</html><!--End group email -->
--2yFPcNoVcvPF2DJtWrOpE1jv2KY1wUKlIj3vX-j--