[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 261
  • Last Modified:

javascript collapsable table rows doesn't work properly in firefox

I have written the following code, in IE it is working exactly as I want it to be, that is click the image and it will expand the section, if you click another section and the previous section was empty it will collapse that and expand the new one. If the previous section was not empty, it will leave it expanded idea is that the user can see exactly what options they have selected.

If you load this is firefox it kind of works, but formatting is corrupted. i.e somethings the options do not line up correctly, and also playing around with collapsing and expanding the sections, a lot of unwanted vertical spacing is generated. How can I fix this?

P.s might help if you create two images called 'collapse.gif' and 'expand.gif' if you want to try out the code below:

I only have 80 points left...sorry.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<link rel=stylesheet type="text/css" href="styles.css">
<script src="js/script.js" language="javascript" type="text/javascript"></script>
</head>
<body>
  <script language="JavaScript" type="text/javascript">
function expandRow(itemid)
{
      var headerrow = document.getElementById('header_' + itemid);
      headerrow.style.display = "block";            
      // get all the radio button elements in a known structure
      var elem = document.forms[0].elements;
      var radios = new Array();
      var expandimage = document.getElementById('expand_' + itemid);
      expandimage.src = "collapse.gif";      
      for(var i=0; i<elem.length; i++)
      {
            var reg = /^noradio_((.+)_(.+)_(.+))/i;            
            var ar = reg.exec(elem[i].id);            
          if(ar != null)
            {                  
                  if(ar[3] == itemid)
                  {
                        var optionrow = document.getElementById('option_' + ar[1]);
                        optionrow.style.display = "block";      
                  }
            }
      }      
      
      // collapse any other expanded ones apart from the one the user just clicked on
      collapseNonSelectedRows(itemid);
}

function collapseNonSelectedRows(itemid)
{
      // get all the radio button elements in a known structure      
      var elem = document.forms[0].elements;
      var radios = new Array();
      for(var i=0; i<elem.length; i++)
      {
            var reg = /^noradio_((.+)_(.+)_(.+))/i;            
            var ar = reg.exec(elem[i].id);            
          if(ar != null)
            {                  
                  if(radios[ar[3]] == null)
                  {
                        radios[ar[3]] = new Array();
                  }
                  radios[ar[3]].push(ar[1]);                  
            }
      }
      
      // go through the associative array and hide all items that have all their options as "no"
      for(items in radios)
      {            
            // if specified by paramater not to collapse this item then ignore it
            if(itemid == null || itemid != items)
            {
                  var expandimage = document.getElementById('expand_' + items);
                  expandimage.src = "collapse.gif";                  
                  var allNo = true;
                  for(var i=0; i<radios[items].length; i++)
                  {                        
                        if(document.getElementById('noradio_' + radios[items][i]).checked != 1)
                        {
                              allNo = false;
                        }                        
                  }
                  // if all no then hide then
                  if(allNo == true)
                  {
                        var headerrow = document.getElementById('header_' + items);
                        headerrow.style.display = "none";
                        var expandimage = document.getElementById('expand_' + items);
                        expandimage.src = "expand.gif";
                        for(var i=0; i<radios[items].length; i++)
                        {                              
                              var optionrow = document.getElementById('option_' + radios[items][i]);
                              optionrow.style.display = "none";                              
                        }
                  }
            }
      }
}
  </script>
  <table width="560" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333">
    <tr>
      <td>

        <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bordercolor="#66CCFF" bgcolor="#66CCFF">
          <tr>
            <td valign="middle" bgcolor="#666666"><div align="center">
                <p><br />
                  <br />
                  <br />
              </p>

              </div></td>
          </tr>
        <tr>
      <td bgcolor="#666666">&nbsp;</td>
</tr>
<tr>
      <td valign="middle" bgcolor="#66CCFF"><br />
            <table width="399" border="0" align="center" bordercolor="#FFFFFF">

                  <form method="post" name="customerorderform" action="index.php?act=customerform&page=1">
                        <input type="hidden" name="customerorderform" value="1">
      <tr>
                              <td colspan="7" bgcolor="#6699FF" class="style10">
                                    <div align="center">
                                          <a href="javascript:expandRow(1);"><img src="expand.gif" name="expand_1" border="0" align="left" id="expand_1"></img></a>                    
                                          <div align="center">Students</div>
                                </div>                              </td>
                        </tr>
                        <tr id="header_1">
                              <td width="17" class="style10">                              </td>
                              <td width="35" class="style10">                              
                                    <div align="center">Yes</div>                              </td>
                              <td width="35" class="style10">                              
                                    <div align="center">No</div>                              </td>
                              <td width="14" class="style10">                              </td>
                              <td width="190" class="style10">
                                    Options                              </td>
                              <td width="61" class="style10">&nbsp;</td>

                              <td width="17" class="style10">                              </td>
                        </tr>
      <tr id="option_1_1_1">
                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_1_1" id="yesradio_1_1_1" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_1_1" id="noradio_1_1_1" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">books</td>
                              <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>

      
                        <tr id="option_1_1_2">
                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_1_2" id="yesradio_1_1_2" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_1_2" id="noradio_1_1_2" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">pens</td>
                              <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>
      
                        <tr id="option_1_1_3">
                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_1_3" id="yesradio_1_1_3" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_1_3" id="noradio_1_1_3" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">pencils</td>
                              <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>
      
                        <tr>
                              <td colspan="7" bgcolor="#6699FF" class="style10">

                                    <div align="center">
                                          <a href="javascript:expandRow(2);"><img src="expand.gif" name="expand_2" border="0" align="left" id="expand_2"></img></a>                    
                                          <div align="center">Parents</div>
                                </div>                              </td>
                        </tr>
                        <tr id="header_2">
                              <td width="17" class="style10">                              </td>

                              <td width="35" class="style10">                              
                                    <div align="center">Yes</div>                              </td>
                              <td width="35" class="style10">                              
                                    <div align="center">No</div>                              </td>
                              <td width="14" class="style10">                              </td>
                              <td width="190" class="style10">

                                    Options</td>
                          <td width="61" class="style10">&nbsp;</td>
                              <td width="17" class="style10">                              </td>
                        </tr>
      <tr id="option_1_2_4">

                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_2_4" id="yesradio_1_2_4" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_2_4" id="noradio_1_2_4" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">blackboard</td>
                          <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>
      
                        <tr id="option_1_2_5">
                              <td width="17"  class="style8">                              </td>
                              <td width="35"  class="style8">
                                    <div align="center">
                                          <input type="radio"  name="radio_1_2_5" id="yesradio_1_2_5" value="1"  />
                                    </div>                              </td>
                              <td width="35" class="style8">                              
                                    <div align="center">                        
                                          <input type="radio"  name="radio_1_2_5" id="noradio_1_2_5" value="0" checked />                      
                                    </div>                              </td>
                              <td width="14" class="style2">                              </td>
                              <td width="190" class="style2">marker</td>
                          <td width="61" class="style2">&nbsp;</td>
                              <td width="17" class="style2">                              </td>
                        </tr>
      
                        <tr>
                              <td colspan="7" bgcolor="#6699FF" class="style10">&nbsp;</td>
                        </tr>
                  </form>
            </table>              
            <p> </p>

            <div align="center"><br />
            </div>
            <p></p>
      </td>

</tr>
<SCRIPT LANGUAGE="JavaScript">
      collapseNonSelectedRows();
</SCRIPT>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
0
rukiman
Asked:
rukiman
  • 3
  • 3
1 Solution
 
rukimanAuthor Commented:
this is urgent so would be very grateful for a solution to the firefox problem.
0
 
b0lsc0ttCommented:
rukiman,

The first thing I would try is not replace none with block to show the row.  I have seen issues with this.  My recommendation is to change "block" to "".  This will remove none but not replace it with block, which causes a problem.  The table row will show since none is not used.  Let me know if you want to know specifically where to do this in your code.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
rukimanAuthor Commented:
your a life saver...that fixed all the issues...
whats the meaning of block? I just assumed that was the way to unhide elements.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
b0lsc0ttCommented:
It isn't exactly the way to unhide.  Basically block will cause elements to be handled on their own line.  For example, naturally block elements are p, br, h#, and div.

Inline elements do not start a new line.  Some examples are strong and span.

I hope this basic explanation helps.  I'm glad the problem was just using block.  Let me know if you have any other question.

bol
0
 
rukimanAuthor Commented:
thats all for now...thanks very much, now I can continue with the rest of the project !
0
 
b0lsc0ttCommented:
Your welcome!  I'm glad that I could help.  Thank you for the grade, the points and the fun question.

bol
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now