CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer-8tablesorter
grek
grek

Reputation: 93

jQuery tablesorter - IE8 issue with adding style to table row

Using jQuery tablesorter to sort and give style to each odd row in the table.

Issue: IE8 ignores the table row background or wouldn't apply the style for odd rows. Any idea how to make this work for IE < 9?

Here is the http://jsfiddle.net/rdos/kg7e771g/3/ - this works fine in all browsers except IE < 10

Thanks!

JSP:

<html>
<head>
<style type="text/css">
.tablesorter tbody tr:nth-child(odd) {
    background-color: #faf4e2;
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/js/jquery.tablesorter.js"></script>
<script type="text/javascript">
    $(document).ready(function() {          
            $("#myTable").tablesorter();            
        } 
    ); 
</script>
</head>

<body>
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th>     
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Saul</td> 
    <td>Tarsus</td> 
    <td>[email protected]</td> 
   </tr> 
<tr> 
    <td>Paul</td> 
    <td>Rock</td> 
    <td>[email protected]</td>     
</tr> 
</tbody> 
</table> 
</body>
</html>

Upvotes: 1

Views: 257

Answers (2)

grek
grek

Reputation: 93

The below took care of table row style for IE < 9:

$(document).ready(function() {               
        $('#myTable')
        .tablesorter({ widgets: ['zebra'] })
        .bind('sortEnd', function(){
            $("#myTable").trigger("applyWidgets");              
        });
    } 
);

For other browsers - the below kicks in and override the above style:

.tablesorter tbody tr:nth-child(odd) {
    background-color: #faf4e2;
}

Upvotes: 0

charlietfl
charlietfl

Reputation: 171690

Can add td to rule

.tablesorter tbody tr:nth-child(odd) td{
    background-color: #faf4e2;
}

Or 

  .tablesorter tbody tr:nth-child(odd), .tablesorter tbody tr:nth-child(odd) td{
        background-color: #faf4e2;
    }

Or

Add an IE conditional comment around a style tag that adds the td rule so it only takes effect in IE < 9

Upvotes: 1

Related Questions