Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Hiding part of table dynamically with javascript - IE6 does not support div inside table.

8 views
Skip to first unread message

jc

unread,
Jun 29, 2009, 5:22:46 PM6/29/09
to
SharePoint designer warns me that IE6 does not support a DIV inside a
Table.

I need to be able to hide a big chunk of an HTML Table. If that
chunck were under a DIV and had an ID, could hide the DIV with
javascipt based on some other control we will check.

Also, for some reason I can't seem to shrink the left column of a
table. The table is automatically generated by SharePoint designer.
I'm looking at the code, the stylesheet and the data int he cells and
I don't see why. At the top of the left column is the text .

Hospital


The style sheet don't have anything special in them. Just a width and
valign.

Thanks for any help or information.

<table border="0" width="100%">
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
</xsl:call-template>
</table>
</xsl:template>
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<tr>
<td class="ms-toolbar" nowrap="">
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap=""><IMG SRC="/_layouts/
images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="">
<SharePoint:SaveButton runat="server" ControlMode="New"
id="savebutton1"/>
</td>
<td class="ms-separator"> </td>
<td class="ms-toolbar" nowrap="" align="right">
<SharePoint:GoBackButton runat="server" ControlMode="New"
id="gobackbutton1"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="ms-toolbar" nowrap="" style="height: 28px">
<SharePoint:FormToolBar runat="server" ControlMode="New"/>
</td>
</tr>
<xsl:call-template name="dvt_1.rowedit">
<xsl:with-param name="Pos" select="concat('_', position
())" />
</xsl:call-template>

<tr>
<td class="ms-toolbar" nowrap="">
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap=""><IMG SRC="/_layouts/
images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="">
<SharePoint:SaveButton runat="server" ControlMode="New"
id="savebutton2"/>
</td>
<td class="ms-separator"> </td>
<td class="ms-toolbar" nowrap="" align="right">
<SharePoint:GoBackButton runat="server" ControlMode="New"
id="gobackbutton2"/>
</td>
</tr>
</table>
</td>
</tr>
</xsl:template>
<xsl:template name="dvt_1.rowedit">
<xsl:param name="Pos" />
<tr>
<td>
<table border="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="style1" style="width: 205px">
<H3 class="ms-standardheader">
<nobr>Hospital<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff1{$Pos}"
ControlMode="New" FieldName="Hospital" __designer:bind="{ddwrt:DataBind
('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims
(string(@ID)),'@Hospital')}"/>
<SharePoint:FieldDescription runat="server" id="ff1description
{$Pos}" FieldName="Hospital" ControlMode="New"/>
</td>
</tr>

... Table continues.

richard

unread,
Jun 29, 2009, 5:47:42 PM6/29/09
to
On Mon, 29 Jun 2009 14:22:46 -0700 (PDT), jc <jo...@webdos.com> wrote:

>SharePoint designer warns me that IE6 does not support a DIV inside a
>Table.
>
>I need to be able to hide a big chunk of an HTML Table. If that
>chunck were under a DIV and had an ID, could hide the DIV with
>javascipt based on some other control we will check.
>
> Also, for some reason I can't seem to shrink the left column of a
>table. The table is automatically generated by SharePoint designer.
>I'm looking at the code, the stylesheet and the data int he cells and
>I don't see why. At the top of the left column is the text .
>
>Hospital
>
>
>The style sheet don't have anything special in them. Just a width and
>valign.
>
>Thanks for any help or information.
>


Then I would scrap sharepoint as an html editor.
Have you tried using a span instead?

There is some javascript that will hide table rows and columns.

C A Upsdell

unread,
Jun 29, 2009, 6:01:16 PM6/29/09
to
jc wrote:
> SharePoint designer warns me that IE6 does not support a DIV inside a
> Table.

IE supports DIV within a TD. The standards do not allow a DIV elsewhere
in a table, e.g. immediately within the TBODY tag.

> I need to be able to hide a big chunk of an HTML Table. If that
> chunck were under a DIV and had an ID, could hide the DIV with
> javascipt based on some other control we will check.

You can hide a TR and its contents using CSS and/or JavaScript.

> Also, for some reason I can't seem to shrink the left column of a
> table. The table is automatically generated by SharePoint designer.
> I'm looking at the code, the stylesheet and the data int he cells and
> I don't see why. At the top of the left column is the text .

A mass of invalid code, including non-existent tags and attributes. As
browsers become more compliant with standards, such pages will become
more problematic.

Adrienne Boswell

unread,
Jun 29, 2009, 6:45:13 PM6/29/09
to
Gazing into my crystal ball I observed jc <jo...@webdos.com> writing in
news:e247b91c-0010-4861...@g23g2000vbr.googlegroups.com:

> SharePoint designer warns me that IE6 does not support a DIV inside a
> Table.

Have you validated the document against the W3c standards? What
Sharepoint in probably complaining about is something like:

<table>
<div>
content
</div>
<tr>
<td>something</td>
</tr>
</table>

You can however use:
<table>
<tr>
<td>
<div>content</div>
</td>
</tr>
</table>

You're not trying to use tables for positioning elements, are you?

>
> I need to be able to hide a big chunk of an HTML Table. If that
> chunck were under a DIV and had an ID, could hide the DIV with
> javascipt based on some other control we will check.

Oh dear, I think maybe you are.

>
> Also, for some reason I can't seem to shrink the left column of a
> table. The table is automatically generated by SharePoint designer.
> I'm looking at the code, the stylesheet and the data int he cells and
> I don't see why. At the top of the left column is the text .
>
>

Yup, definately using tables for positioning elements. Please, do
yourself a favor and stop using that tool. Learn HTML and CSS, and then
you can do your server side scripting within it. At least if you learn
the aforementioned, you will be able to debug your own results.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Roy A.

unread,
Jun 29, 2009, 8:58:27 PM6/29/09
to
On 29 Jun, 23:22, jc <j...@webdos.com> wrote:
> SharePoint designer warns me that IE6 does not support a DIV inside a
> Table.

IE6 an no other browser should allow that, except inside an td
element.

> I need to be able to hide a big chunk of an HTML Table.

Use the tbody element.

>  If that
> chunck were under a DIV and had an ID, could hide the DIV with
> javascipt based on some other control we will check.

You can have an id on an tbody element.

>  Also, for some reason I can't seem to shrink the left column of a
> table. The table is automatically generated by SharePoint designer.
> I'm looking at the code, the stylesheet and the data int he cells and
> I don't see why. At the top of the left column is the text .

You have to look at how the width of table cells is calculated:
http://www.w3.org/TR/CSS2/tables.html#width-layout

Roy A.

unread,
Jun 29, 2009, 9:05:32 PM6/29/09
to
On 29 Jun, 23:47, richard <mem...@newsguy.com> wrote:

> On Mon, 29 Jun 2009 14:22:46 -0700 (PDT), jc <j...@webdos.com> wrote:
> >SharePoint designer warns me that IE6 does not support a DIV inside a
> >Table.
>
> >I need to be able to hide a big chunk of an HTML Table.  If that
> >chunck were under a DIV and had an ID, could hide the DIV with
> >javascipt based on some other control we will check.
>
> > Also, for some reason I can't seem to shrink the left column of a
> >table. The table is automatically generated by SharePoint designer.
> >I'm looking at the code, the stylesheet and the data int he cells and
> >I don't see why. At the top of the left column is the text .
>
> >Hospital
>
> >The style sheet don't have anything special in them. Just a width and
> >valign.
>
> >Thanks for any help or information.
>
> Then I would scrap sharepoint as an html editor.

I could not agree more. Sherepoint is the road to disaster.

> Have you tried using a span instead?

I don't think it will work. I think he is talking about hiding table-
rows.

> There is some javascript that will hide table rows and columns.

That would be a better idea. Then disabled people would be able to see
what he is hiding.

jc

unread,
Jun 30, 2009, 10:52:45 AM6/30/09
to
Thanks for responses!

Here's the deal, SharePoint (the server side product) automagically
generates these aspx pages and does use tables to position it's input
fields and labels. It is what it is - and it's doing a whole lot more
than static HTML, it's building a Database Interfaces with exception
handling.

And only SharePoint Designer (SPD) allows me to reference those
SharePoint specific controls for customization.

I would imagine I could use SPD to generate the customizable controll
and then move to something more suited for html and css formating on
that page.

That said.. It's a table right now with many many rows (<TR>s).. say I
want be able to hide 20 of those rows based on the value of some other
control on the page.

Any way to group those rows somehow? Or will I have to seperate them
into their own table?

One of the considerations is that is a process we will likely be doing
again and again on the generated code for similar requirements. If
Possible, we are NOT looking to overhaul pages - so the least
intrusive the better.

I do suspect there are much better products for HTML/CSS formating.
I'll have to test to see how well it will work with what SharePoint
generates.. factoring in that some of the stuff SharePoint generates
and usese is actually inside a Database and not a web server or file
system.

Thanks again!

jc

unread,
Jun 30, 2009, 10:58:17 AM6/30/09
to
I am testing the <TBODY> tag.. That does look and sound very
promising. Thanks Again.

Message has been deleted

jc

unread,
Jun 30, 2009, 2:41:23 PM6/30/09
to
Please disregard a prior (very long) post I just removed. I figured
out my issue.

I am now able to find and hide the TBODY. However, the issue I'm
having is that it leave a big gap in my table. I've tried
visibility:collapse, but that did not help.

My javascript looks like this:

document.getElementById('tbodytest').style.visibility = 'hidden';

markup:
</tr>
<tbody id="tbodytest" >
<tr>

I've tried adjusting line-height and adding collapse.

Thanks.

Kevin Scholl

unread,
Jun 30, 2009, 3:24:57 PM6/30/09
to
On Jun 30, 2:41 pm, jc <j...@webdos.com> wrote:

> I am now able to find and hide the TBODY. However, the issue I'm
> having is that it leave a big gap in my table. I've tried
> visibility:collapse, but that did not help.
>
> My javascript looks like this:
>
> document.getElementById('tbodytest').style.visibility = 'hidden';

document.getElementById('tbodytest').style.display= 'none';

> markup:
> </tr>
> <tbody id="tbodytest" >
> <tr>
>
> I've tried adjusting line-height and adding collapse.

Visibility is exactly as it suggests, toggling whether something
appears or not. The space it occupies remains whether you can see the
element(s) or not.

The display property essentially removes the entire block from the
document flow; IOW, the space it occupies collapses when display is
set to 'none'. To bring it back, you would typically replace 'none'
with 'block'.

0 new messages