Need to Hide Table inside div:Code is Working Fine in FireFox but Not in IE..Please Help

[sumeet gupta]

Hi Ranchers,

I need to hide one table inside a div , I wrote one java script for this. My Code is working fine in firefox but not working in IE. Please help me to resolve this issue.
This is my Jsp..

  <DIV id="tbody_7" style="display:none">
<table   border="0"  >
 <tr class="activbgodd">
 <td >Application support 24/7
 <input type="hidden" name="act" value="Application support 24/7"/>
 <input type="hidden" name="thres" value="0"/>
 </td>
 <td><input type="text" style="width: 30px" name="d1_h" tabindex="51" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,1);" /></td>
 <td><input type="text" style="width: 30px" name="d1_m" tabindex="52" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,1);" /></td>
 
 <td  ><a   rel="nofollow"><img      border="0" /></a>
 <input type="hidden" name="d1_h_rem" value="null"/>
 
 </td>
 <td><input type="text" style="width: 30px" name="d2_h" tabindex="141" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,2);" /></td>
 <td><input type="text" style="width: 30px" name="d2_m" tabindex="142" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,2);" /></td>
 
 <td  ><a   rel="nofollow"><img      border="0" /></a>
 <input type="hidden" name="d2_h_rem" value="null"/>
 </td>
 <td><input type="text" style="width: 30px" name="d3_h" tabindex="231" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,3);" /></td>
 <td><input type="text" style="width: 30px" name="d3_m" tabindex="232" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,3);" /></td>
 
 <td  ><a   rel="nofollow"><img      border="0" /></a>
 
 <input type="hidden" name="d3_h_rem" value="null"/>
 </td>
 <td><input type="text" style="width: 30px" name="d4_h" tabindex="321" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,4);" /></td>
 <td><input type="text" style="width: 30px" name="d4_m" tabindex="322" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,4);" /></td>
 
 <td  ><a   rel="nofollow"><img      border="0" /></a>
 <input type="hidden" name="d4_h_rem" value="null"/>
 </td>
 <td><input type="text" style="width: 30px" name="d5_h" tabindex="411" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,5);" /></td>
 <td><input type="text" style="width: 30px" name="d5_m" tabindex="412" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,5);" /></td>
 
 
 <td  ><a   rel="nofollow"><img      border="0" /></a>
 <input type="hidden" name="d5_h_rem" value="null"/>
 </td>
 
 <td><input type="text" style="width: 30px" name="d6_h" tabindex="501" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,6);" /></td>
 <td><input type="text" style="width: 30px" name="d6_m" tabindex="502" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,6);" /></td>
 
 <td  ><a   rel="nofollow"><img      border="0" /></a>
 <input type="hidden" name="d6_h_rem" value="null"/>
 </td>
 
 <td><input type="text" style="width: 30px" name="d7_h" tabindex="591" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,7);" /></td>
 
 <td><input type="text" style="width: 30px" name="d7_m" tabindex="592" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,7);" /></td>
 
 <td  ><a   rel="nofollow"><img      border="0" /></a>
 <input type="hidden" name="d7_h_rem" value="null"/>
 </td>
 </tr>
 
 </table>
</div>  

and this is my javascript function.

 function showHide(EL,PM)
{
ELpntr=document.getElementById(EL);
if (ELpntr.style.display=='none')
{
document.getElementById(PM).src='/timesheet/img/open.gif';
ELpntr.style.display='block';
}
else
{
document.getElementById(PM).src='/timesheet/img/closed.gif';
ELpntr.style.display='none';
}
}    

Thanks,
Sumeet Gupta

[Eric Pascarello]

Looks like you did not click the Disable HTML code when you posted. Can you repost your code with that checkbox checked.

[sumeet gupta]

Hi Eric,

Reposting Code with Disable HTML Option Checked this time. Thanks for reminding ...

  <DIV id="tbody_7" style="display:none">
<table align="left" cellspacing="0" border="0" width="100%" style="border-color: white; border-style: solid; border-width: thin;">


<tr class="activbgodd">
<td style="padding-left: 15px; width: 200;">Application support 24/7
<input type="hidden" name="act" value="Application support 24/7"/>
<input type="hidden" name="thres" value="0"/>
</td>



<td><input type="text" style="width: 30px" name="d1_h" tabindex="51" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,1);" /></td>
<td><input type="text" style="width: 30px" name="d1_m" tabindex="52" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,1);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d1_h_rem',25,'n')"><img name="d1_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d1_h_rem" value="null"/>

</td>
<td><input type="text" style="width: 30px" name="d2_h" tabindex="141" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,2);" /></td>
<td><input type="text" style="width: 30px" name="d2_m" tabindex="142" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,2);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d2_h_rem',25,'n' )"><img name="d2_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d2_h_rem" value="null"/>
</td>
<td><input type="text" style="width: 30px" name="d3_h" tabindex="231" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,3);" /></td>
<td><input type="text" style="width: 30px" name="d3_m" tabindex="232" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,3);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d3_h_rem',25,'n')"><img name="d3_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>

<input type="hidden" name="d3_h_rem" value="null"/>
</td>
<td><input type="text" style="width: 30px" name="d4_h" tabindex="321" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,4);" /></td>
<td><input type="text" style="width: 30px" name="d4_m" tabindex="322" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,4);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d4_h_rem',25,'n')"><img name="d4_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d4_h_rem" value="null"/>
</td>
<td><input type="text" style="width: 30px" name="d5_h" tabindex="411" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,5);" /></td>
<td><input type="text" style="width: 30px" name="d5_m" tabindex="412" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,5);" /></td>


<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d5_h_rem',25,'n')"><img name="d5_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d5_h_rem" value="null"/>
</td>

<td><input type="text" style="width: 30px" name="d6_h" tabindex="501" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,6);" /></td>
<td><input type="text" style="width: 30px" name="d6_m" tabindex="502" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,6);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d6_h_rem',25,'n')"><img name="d6_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d6_h_rem" value="null"/>
</td>

<td><input type="text" style="width: 30px" name="d7_h" tabindex="591" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,7);" /></td>

<td><input type="text" style="width: 30px" name="d7_m" tabindex="592" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,7);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d7_h_rem',25,'n')"><img name="d7_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d7_h_rem" value="null"/>
</td>
</tr>

</table>
</div>

and here is java script function...

 
function showHide(EL,PM)
{
ELpntr=document.getElementById(EL);
if (ELpntr.style.display=='none')
{
document.getElementById(PM).src='/timesheet/img/open.gif';
ELpntr.style.display='block';
}
else
{
document.getElementById(PM).src='/timesheet/img/closed.gif';
ELpntr.style.display='none';
}
} 

Thanks,
Sumeet

[Eric Pascarello]

Okay, I was hoping to see your showHide function calls, but I am not. What does one of those look like and what is it hiding exactly.

Eric

[sumeet gupta]

Hi Eric,

Previously I had pasted only div part of my code. Here is my whole code along with the function call which you were talking about.

<td width="100%">
<table align="left" cellspacing="0" border="0" width="100%" style="border-color: white; border-style: solid; border-width: thin">
<thead style="cursor:pointer;" onclick="showHide('tbody_7','7_img')">


<tr class="vis" > 
<th colspan="22" align="left" style="padding-left: 5px; width: 100%;">

<img border="0" id="7_img" src="/timesheet/img/closed.gif"></img> On Call Duty Pager Support

</th>
</tr>
</thead>
</table>
<DIV id="tbody_7" style="display:none">
<table align="left" cellspacing="0" border="0" width="100%" style="border-color: white; border-style: solid; border-width: thin;">


<tr class="activbgodd">
<td style="padding-left: 15px; width: 200;">Application support 24/7
<input type="hidden" name="act" value="Application support 24/7"/>
<input type="hidden" name="thres" value="0"/>
</td>



<td><input type="text" style="width: 30px" name="d1_h" tabindex="51" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,1);" /></td>
<td><input type="text" style="width: 30px" name="d1_m" tabindex="52" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,1);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d1_h_rem',25,'n')"><img name="d1_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d1_h_rem" value="null"/>

</td>
<td><input type="text" style="width: 30px" name="d2_h" tabindex="141" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,2);" /></td>
<td><input type="text" style="width: 30px" name="d2_m" tabindex="142" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,2);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d2_h_rem',25,'n' )"><img name="d2_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d2_h_rem" value="null"/>
</td>
<td><input type="text" style="width: 30px" name="d3_h" tabindex="231" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,3);" /></td>
<td><input type="text" style="width: 30px" name="d3_m" tabindex="232" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,3);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d3_h_rem',25,'n')"><img name="d3_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>

<input type="hidden" name="d3_h_rem" value="null"/>
</td>
<td><input type="text" style="width: 30px" name="d4_h" tabindex="321" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,4);" /></td>
<td><input type="text" style="width: 30px" name="d4_m" tabindex="322" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,4);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d4_h_rem',25,'n')"><img name="d4_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d4_h_rem" value="null"/>
</td>
<td><input type="text" style="width: 30px" name="d5_h" tabindex="411" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,5);" /></td>
<td><input type="text" style="width: 30px" name="d5_m" tabindex="412" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,5);" /></td>


<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d5_h_rem',25,'n')"><img name="d5_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d5_h_rem" value="null"/>
</td>

<td><input type="text" style="width: 30px" name="d6_h" tabindex="501" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,6);" /></td>
<td><input type="text" style="width: 30px" name="d6_m" tabindex="502" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,6);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d6_h_rem',25,'n')"><img name="d6_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d6_h_rem" value="null"/>
</td>

<td><input type="text" style="width: 30px" name="d7_h" tabindex="591" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,7);" /></td>

<td><input type="text" style="width: 30px" name="d7_m" tabindex="592" value="0" maxlength="2" onFocus="showselected(this)" onclick="showselected(this);" onChange="showTotal();" onblur="checkThreshold(25,7);" /></td>

<td align="left" style="padding-left: 0px"><a href="#" onclick="javascript:showPopup('remarksDiv','d7_h_rem',25,'n')"><img name="d7_h_rem_img" src="/timesheet/img/rem.jpg" alt="Click to add remarks" hspace="0" align="left" border="0" style="padding-top: 0px; padding-left: 0px"/></a>
<input type="hidden" name="d7_h_rem" value="null"/>
</td>
</tr>

</table>
</div>
</td> 
 

Thanks,
Sumeet

[Bear Bibeault]

Do you really not indent your code?