Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

jQuery Toggle will not work in Internet Explorer

I have a table that toggles rows(show/hide) it works well in Google Chrome or Firefox but not in IE.

Below is the function that toggles the rows. How can I get this to work in IE?

function elementHideShow(elementToHideOrShow) {
        var MainRow = document.getElementById('M_' + elementToHideOrShow + '-1');
        var el = document.getElementsByName('S_' + elementToHideOrShow);

        $(MainRow).click(function () {
        });

        for (var i = 0; i < el.length; i++) {
            var el2 = document.getElementById('S_' + elementToHideOrShow + i);
            $(el2).toggle();
        }
    }

Also see attached...
cashflow-test.html
0
quest_capital
Asked:
quest_capital
  • 2
1 Solution
 
WebDevEMCommented:
What are you trying to hide when you click the row header... the entire row, or just the data for that row?  I'm working on a solution but your example code isn't working for me.  If you hide the whole row, then you won't be able to click it a second time because the link will be hidden as well.

I have a Fiddle at http://jsfiddle.net/webdevem/ux7QU/ that shows both solutions (of what I think you're looking for)  

HTML:
<div style="width:50%">
<table id="CashflowGrid" cellpadding="0" cellspacing="0" border="0" class="display dataTable" width="100%" aria-describedby="CashflowGrid_info" style="width: 100%; ">
<thead>
<tr>
<th rowspan="2" >Category</th>
<th colspan="2" >JUL 2012</th>
<th colspan="2" >AUG 2012</th>
<th colspan="2" >SEP 2012</th>
</tr>
<tr>
<th>Budgeted</th>
<th>Actual</th>
<th>Budgeted</th>
<th>Actual</th>
<th>Budgeted</th>
<th>Actual</th>
</tr>
</thead>

<tbody>
<tr id="M_Income-1" name="M_Income">
<td class=" "> <a href="#" class="rowToggle">Income</a></td>
<td class="hideable">0.00</td>
<td class="hideable"></td>
<td class="hideable">4,200.00</td>
<td class="hideable">3,000.50</td>
<td class="hideable">4,000.00</td>
<td class="hideable"></td>
</tr>

<tr id="M_Home-1" name="M_Home">
<td class=" "><a href="#" class="rowToggle">Home</a></td>
<td class="hideable">0.00</td>
<td class="hideable"></td>
<td class="hideable">1,200.00</td>
<td class="hideable">1,200.00</td>
<td class="hideable">1,200.00</td>
<td class="hideable"></td>
</tr>

<tr id="S_Home0" name="S_Home">
<td class=" ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Insurance</td>
<td class="">0.00</td>
<td class=""></td>
<td class="">0.00</td>
<td class=""></td>
<td class="">0.00</td>
<td class=""></td>
</tr>

<tr id="S_Home1" name="S_Home">
<td class=" ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lawn</td>
<td class=" ">0.00</td>
<td class=" "></td>
<td class=" ">0.00</td>
<td class=" "></td>
<td class=" ">0.00</td>
<td class=" "></td>
</tr>

<tr id="S_Home2" name="S_Home">
<td class=" ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mortage</td>
<td class=" ">0.00</td>
<td class=" "></td>
<td class=" ">1200.00</td>
<td class=" ">1200.00</td>
<td class=" ">1200.00</td>
<td class=" "></td>
</tr>
</tbody>
</table>
</div>¿

Open in new window

Javascript:
$(".rowToggle").click(function() {
    //Hide the entire row
    //$(this).parent().parent().toggle();
    
    //Hide the contents of the row, leave the header
    $(this).parent().parent().children("td.hideable").toggle();
});¿

Open in new window

0
 
WebDevEMCommented:
UPDATE - I was looking through  your code a bit deeper and think I figured out what you were trying for.  Check out this fiddle: http://jsfiddle.net/webdevem/zrsqR/ to see if it does what you wanted.  

Here's the newer code, so it's saved as part of the post...
HTML:
<div style="width:50%">
<table id="CashflowGrid" cellpadding="0" cellspacing="0" border="0" class="display dataTable" width="100%" aria-describedby="CashflowGrid_info" style="width: 500px; ">
<thead>
<tr>
<th rowspan="2" >Category</th>
<th colspan="2" >JUL 2012</th>
<th colspan="2" >AUG 2012</th>
<th colspan="2" >SEP 2012</th>
</tr>
<tr>
<th>Budgeted</th>
<th>Actual</th>
<th>Budgeted</th>
<th>Actual</th>
<th>Budgeted</th>
<th>Actual</th>
</tr>
</thead>

<tbody>
<tr id="M_Income-1" name="M_Income">
<td class=""> <a href="#" class="incomeToggle">Income</a></td>
<td class="">0.00</td>
<td class=""></td>
<td class="">4,200.00</td>
<td class="">3,000.50</td>
<td class="">4,000.00</td>
<td class=""></td>
</tr>

<tr id="M_Home-1" name="M_Home">
<td class=""><a href="#" class="homeToggle">Home</a></td>
<td class="">0.00</td>
<td class=""></td>
<td class="">1,200.00</td>
<td class="">1,200.00</td>
<td class="">1,200.00</td>
<td class=""></td>
</tr>

<tr id="S_Home1" name="S_Home" class="incomeRow">
<td class="rowHeader">Income Details</td>
<td class=" ">0.00</td>
<td class=" "></td>
<td class=" ">0.00</td>
<td class=" "></td>
<td class=" ">0.00</td>
<td class=" "></td>
</tr>
<tr id="S_Home0" name="S_Home" class="homeRow">
<td class="rowHeader">Insurance</td>
<td class="">0.00</td>
<td class=""></td>
<td class="">0.00</td>
<td class=""></td>
<td class="">0.00</td>
<td class=""></td>
</tr>

<tr id="S_Home1" name="S_Home" class="homeRow">
<td class="rowHeader">Lawn</td>
<td class=" ">0.00</td>
<td class=" "></td>
<td class=" ">0.00</td>
<td class=" "></td>
<td class=" ">0.00</td>
<td class=" "></td>
</tr>

<tr id="S_Home2" name="S_Home" class="homeRow">
<td class="rowHeader">Mortage</td>
<td class=" ">0.00</td>
<td class=" "></td>
<td class=" ">1200.00</td>
<td class=" ">1200.00</td>
<td class=" ">1200.00</td>
<td class=" "></td>
</tr>
</tbody>
</table>
</div>

Open in new window

Javascript:
$(".homeToggle").click(function() {
     $('.homeRow').toggle();
});
$(".incomeToggle").click(function() {
     $('.incomeRow').toggle();
});

Open in new window

0
 
quest_capitalAuthor Commented:
...
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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