Link to home
Start Free TrialLog in
Avatar of Rozamunda
Rozamunda

asked on

why this jquery script is not working IE ? (working in Mozilla)

       var collapseIcon = 'bullet_toggle_minus1.png';
        var collapseText = 'Collapse this section';
        var expandIcon =   'bullet_toggle_plus1.png';
        var expandText =  'Expand this section';
        
        var $countrycells = $('table th');
        $countrycells.addClass('clickablep');
        
        $('table.collapsible tbody').each(function() {
              var $section = $(this);
              if ($section.is('.first'))
              {
                          $section.removeClass('first')
                            .find('tr:not(:has(th))')
                            .fadeOut('fast', function() {
                            $(this).css('display', 'none');
                                  });
            }      
            $('<img />').attr('src', expandIcon)
                  .attr('alt', expandText).css('padding','5px 5px 0 0')
                  .prependTo($section.find('th'))
                  .addClass('clickablep').parent().click(function() {
                   if ($section.is('.collapsed')) {
                         $section.removeClass('collapsed')
                         .find('tr:not(:has(th)):not(.filtered)')
                         .fadeIn('fast');
                $(this).children().attr('src', collapseIcon)
                  .attr('alt', collapseText);
                   }
              else {
                $section.addClass('collapsed')
                  .find('tr:not(:has(th))')
                  .fadeOut('fast', function() {
                    $(this).css('display', 'none');
                  });
                $(this).children().attr('src', expandIcon)
                  .attr('alt', expandText);
              }
              $section.parent().trigger('stripe');
                        });
          
          $('<img />').css('padding','5px 5px 0 0');
          
           if ($section.is('.collapsed'))
           {       
                
           }      else {  $('<img />').css('padding','5px 5px 0 0'); }
                 
                    });      
ASKER CERTIFIED SOLUTION
Avatar of LAMASE
LAMASE
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rozamunda
Rozamunda

ASKER

it is not collapsing table rows, unfortunately it is behind firewall. Here is the table definition:

<div id = "tabelka">

   <table class="collapsible"> <thead> <tr>
   <th> xxx </th>

       
  <th>10 May</th><th>10 Jun</th><th>10 Jul</th><th>10 Aug</th><th>10 Sep</th><th>10 Oct</th><th>10 Nov</th><th>10 Dec</th><th>11 Jan</th><th>11 Feb</th><th>11 Mar</th><th>11 Apr</th><th>11 May</th></tr><tbody  class='first collapsed'><tr><th> Country 1            </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th> Country 2    </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th>
 Country 3     </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th>CAN CDC                           </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th> Country 4                          </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th> Country 5    </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody>
                 
   </table>
 

and css:


#tabs th,
#tabs td {
  padding: 3px 6px;
  vertical-align: top;
  font-size: 14px;
  text-align: right;
}
#tabs th {
  text-align: left;
  color: #fff;
}

#tabs thead th  {
  background-color: #bbbbbb;    
}
#tabs .sortable thead th {
  padding-left: 18px;
}
#tabs tbody th {
  background-color: #666;
  padding-left: 6px;
}

 #tabs tbody td {
       
 background-color: #bbb;      
}
 #tabs tbody td.netsales {
       
 background-color: #ddd;      
       
}
#tabs .date-column {
  width: 40px;
}
th img {
  float: left;
}

tr.even,
tr.first {
  background-color: #eee;
}
tr.odd,
tr.second {
  background-color: #ddd;
}
tr.third {
  background-color: #ccc;  
}

td.sorted {
      background: #ffd;
}
th.clickable {
  background: transparent url(images/sort-arrows.png) no-repeat 0 0;
}
th.sorted-asc {
 background-position: 0 -20px;
}
th.sorted-desc {
  background-position: 0 -40px;
}

.filtered {
  display: none;
}

/* filterable table */

#tabs table.filterable {
  width: 78%;
 
}
#tabs .filters {
 float: right;
 width: 19%;
 padding-left:5px;
}

#tabs .filterable thead th {
  padding-left: 6px;
}
div.pager {
  margin-bottom: .25em;
}

#tabs .page-number,
#tabs .filter {
  padding: .2em;
}
#tabs .page-number {
  border: 1px solid #ccc;
  margin-right: 2px;
}
#tabs .active {
  background: #ccf;
  border: 1px solid #006;
}


#tabs tr.highlight {
  background: #ff6;
}
#tabs tr.plain {
  background: #fff;
}
#tooltip {
  position: absolute;
  z-index: 2;
  background: #efd;
  border: 1px solid #ccc;
  padding: 3px;
}

.clickablep {
      
 cursor: pointer;      
}