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

[jc]

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">
<xslaram 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">
<xslaram 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="{ddwrtataBind
('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]

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]

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]

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.

 

[Roy A.]

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.]

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]

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]

I am testing the <TBODY> tag.. That does look and sound very
promising. Thanks Again.

 

[jc]

I am testing the <TBODY> tag.. That does look and sound very
promising. Thanks Again.

no javascript errors, but I am having trouble finding the control..


The commented line hides my entire table. the second line does
nothing. my tbody is just wrapping 3 of the rows in the table.

<script language="javascript" type="text/javascript">

_spBodyOnLoadFunctionNames.push("setdefaults");

function setdefaults()
{
\\document.getElementById
("tbodytest").parentNode.parentNode.parentNode.style.display="none";
document.getElementById("tbodytest").style.display="none";
}
</script>



Here's the code surround the tbodytest.

<tbody id="tbodytest" >
<tr>
<td valign="top" class="style1" style="width: 253px">
<H3 class="ms-standardheader" style="width: 114px">
<nobr>Team<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td valign="top" class="ms-formbody" style="width: 730px">
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New"
FieldName="Team" __designer:bind="{ddwrtataBind('i',concat('ff3',
$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string
(@ID)),'@Team')}"/>
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}"
FieldName="Team" ControlMode="New"/>
</td>
</tr>
<tr>
<td valign="top" class="style1" style="width: 253px">
<H3 class="ms-standardheader">
<nobr>Patient First Name</nobr>
</H3>
</td>
<td valign="top" class="ms-formbody" style="width: 730px">
<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New"
FieldName="Title" _designer:bind="{ddwrtataBind('i',concat('ff4',
$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string
(@ID)),'@Title')}"/>
<SharePoint:FieldDescription runat="server" id="ff4description{$Pos}"
FieldName="Title" ControlMode="New"/>
</td>
</tr>
</tbody>
<tr> ...



Here's part of the View Source rendering surronding tbodytest (SORRY
TO POST THIS MESS) .. I suspect it's some sort of nesting issue as to
why I can't find it.

</tr>
</table>

</td></tr><tr><td><table border="0" cellspacing="0" width="100%"
class="style2"><tr><td valign="top" class="style1" style="width:
253px"><H3 class="ms-standardheader"><nobr>Hospital<span class="ms-
formvalidation"> *</span></nobr></H3></td><td valign="top" class="ms-
formbody" style="width: 730px"><span dir="none"><select
name="ctl00$PlaceHolderMain$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e
$ff1_1$ctl00$DropDownChoice"
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff1_1_ctl00_DropDownChoice"
title="Hospital" class="ms-RadioText">
<option selected="selected" value=""></option>
<option value="UMH">UMH</option>
<option value="UMHC/Sylvester">UMHC/Sylvester</option>

</select><br></span></td></tr><tr><td valign="top" class="style1"
style="width: 253px"><H3 class="ms-standardheader"><nobr>Hospitalist
Name<span class="ms-formvalidation"> *</span></nobr></H3></td><td
valign="top" class="ms-formbody" style="width: 730px"><span
dir="none"><span style="vertical-align:middle"><input
name="ctl00$PlaceHolderMain$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e
$ff2_1$ctl00$ctl01" type="text"
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff2_1_ctl00_ctl01"
class="ms-lookuptypeintextbox" onfocusout="HandleLoseFocus()"
opt="_Select" title="Hospitalist Name"
optHid="SPHospitalist_x0020_Name_Hidden" onkeypress="HandleChar()"
onkeydown="HandleKey()" match="" choices="Dr. Aldo Pavon Canseco|1|Dr..
Alex Rico|18|Dr. Ali Garcia|12|Dr. Amir Jaffer|9|Dr. Andres Soto|25|
Dr. Angelica R Jimenez|8|Dr. Cynthia Rivera|19|Dr. Efren Manjarrez|7|
Dr. Jenny Drice|2|Dr. Jessica Zuleta|23|Dr. Joshua Lenchus|5|Dr. Katya
Dimas|13|Dr. Kostiya Peki|17|Dr. Lisa Luly-Rivera|20|Dr. Rene Parraga|
26|Dr. Seema Chandra|11|Dr. Shahryar Saba|21|Dr. Syeda Abbas|10|Dr.
Tariq Mahmood|16|Dr. Tony Talebi|24|Dr. Venkat Kalidindi|15|Dr. Victor
Herrera|4|Ha Vo Green, PA|14" onchange="HandleChange()" /><img
alt="Display lookup values" onclick="ShowDropdown
('ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff2_1_ctl00_ctl01');"
src="/_layouts/images/dropdown.gif" style="border-width:0px;vertical-
align:middle;" /></span><br/></span></td></tr><tbody
id="tbodytest"><tr><td valign="top" class="style1" style="width:
253px"><H3 class="ms-standardheader" style="width:
114px"><nobr>Team<span class="ms-formvalidation"> *</span></nobr></
H3></td><td valign="top" class="ms-formbody" style="width:
730px"><span dir="none"><table cellpadding="0" cellspacing="1">
<tr>
<td><span class="ms-RadioText" title="Team A"><input
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl00"
type="radio" name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff3_1$ctl00$RadioButtons"
value="ctl00" /><label
for="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl00">Team
A</label></span></td>
</tr><tr>
<td><span class="ms-RadioText" title="Team B"><input
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl01"
type="radio" name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff3_1$ctl00$RadioButtons"
value="ctl01" /><label
for="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl01">Team
B</label></span></td>
</tr><tr>
<td><span class="ms-RadioText" title="Team C"><input
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl02"
type="radio" name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff3_1$ctl00$RadioButtons"
value="ctl02" /><label
for="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl02">Team
C</label></span></td>
</tr><tr>
<td><span class="ms-RadioText" title="Team D"><input
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl03"
type="radio" name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff3_1$ctl00$RadioButtons"
value="ctl03" /><label
for="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl03">Team
D</label></span></td>
</tr><tr>
<td><span class="ms-RadioText" title="Team E"><input
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl04"
type="radio" name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff3_1$ctl00$RadioButtons"
value="ctl04" /><label
for="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff3_1_ctl00_ctl04">Team
E</label></span></td>
</tr>
</table></span></td></tr><tr><td valign="top" class="style1"
style="width: 253px"><H3 class="ms-standardheader"><nobr>Patient First
Name</nobr></H3></td><td valign="top" class="ms-formbody"
style="width: 730px"><span dir="none">
<input name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff4_1$ctl00$ctl00$TextField"
type="text" maxlength="255"
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff4_1_ctl00_ctl00_TextField"
title="Patient First Name" class="ms-long" /><br>
</span></td></tr></tbody><tr><td valign="top" class="style1"
style="width: 253px"><H3 class="ms-standardheader"><nobr>Patient Last
Name</nobr></H3></td><td valign="top" class="ms-formbody"
style="width: 730px"><span dir="none">
<input name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff5_1$ctl00$ctl00$TextField"
type="text" maxlength="255"
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff5_1_ctl00_ctl00_TextField"
title="Patient Last Name" class="ms-long" /><br>
</span></td></tr><tr><td valign="top" class="style1" style="width:
253px"><H3 class="ms-standardheader"><nobr>UMH Patient Account #</
nobr></H3></td><td valign="top" class="ms-formbody" style="width:
730px"><span dir="none">
<input name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff6_1$ctl00$ctl00$TextField"
type="text" maxlength="255"
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff6_1_ctl00_ctl00_TextField"
title="UMH Patient Account #" class="ms-long" /><br>
</span>&quot;Cxxxxxxxx&quot;</td></tr><tr><td valign="top"
class="style1" style="width: 253px"><H3 class="ms-
standardheader"><nobr>UMHC UMMG #</nobr></H3></td><td valign="top"
class="ms-formbody" style="width: 730px"><span dir="none">
<input name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff7_1$ctl00$ctl00$TextField"
type="text"
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff7_1_ctl00_ctl00_TextField"
title="UMHC UMMG #" class="ms-input" Size="11" style="ime-
mode:inactive;" /><br>
</span></td></tr><tr><td valign="top" class="style1" style="width:
253px"><H3 class="ms-standardheader"><nobr>Date of Birth</nobr></H3></
td><td valign="top" class="ms-formbody" style="width: 730px"><span
dir="none">
<SCRIPT language='javascript'>g_strDateTimeControlIDs
["SPDate_x0020_of_x0020_Birth"] =
"ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff8_1_ctl00_ctl00_DateTimeField_DateTimeFieldDate";</
SCRIPT>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td class="ms-dtinput" >
<label
for="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff8_1_ctl00_ctl00_DateTimeField_DateTimeFieldDate"
style="display:none">Date of Birth Date</label>
<input name="ctl00$PlaceHolderMain
$g_173ecf76_ef32_4da9_a6af_977b3fcfc49e$ff8_1$ctl00$ctl00$DateTimeField
$DateTimeFieldDate" type="text" maxlength="45"
id="ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff8_1_ctl00_ctl00_DateTimeField_DateTimeFieldDate"
title="Date of Birth" class="ms-input" AutoPostBack="0" /></td>
<td class="ms-dtinput" >
<A href="#" onclick='clickDatePicker
("ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff8_1_ctl00_ctl00_DateTimeField_DateTimeFieldDate",
"\u002fsites\u002fHospitalmed\u002f_layouts\u002fiframe.aspx?
&cal=1&lcid=1033&langid=1033&tz=-04:00:00.0006700&ww=0111110&fdow=0&fwoy=0&hj=0&swn=False&minjday=109207&maxjday=2666269&date=",
""); return false;' ><IMG
id=ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff8_1_ctl00_ctl00_DateTimeField_DateTimeFieldDateDatePickerImage
src="/_layouts/images/calendar.gif" border="0" alt="Select a date from
the calendar."></IMG></A></td>
<IFRAME
id=ctl00_PlaceHolderMain_g_173ecf76_ef32_4da9_a6af_977b3fcfc49e_ff8_1_ctl00_ctl00_DateTimeField_DateTimeFieldDateDatePickerFrame
SRC="/_layouts/images/blank.gif" FRAMEBORDER=0 SCROLLING=no
style="DISPLAY:none;POSITION:absolute; width:200px; Z-INDEX:101;"
title="Select a date from the calendar."></IFRAME></tr></table>


Thanks again for any help or information!

 

[jc]

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]

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'.