Troubleshooting problem with styling table rows in jQuery tablesorter on IE8

Looking to implement jQuery tablesorter for sorting and styling odd rows in a table.

Encountered an issue with IE8 where the row background or style is not applied to odd rows. Any suggestions on how to fix this for IE versions below 9?

Check out the live demo here - Everything seems to work fine on all browsers except IE 10 and lower.

Appreciate any help!

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><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="067572466b676f6a2865696b">[email protected]</a></td> 
   </tr> 
<tr> 
    <td>Paul</td> 
    <td>Rock</td> 
    <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c3c3e0c212d2520622f2321">[email protected]</a></td>     
</tr> 
</tbody> 
</table> 
</body>
</html>

Answer №1

Instructions for applying new style to table rows

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

Alternatively, you can use this code:

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

Another option is to include an IE conditional comment around the style tag that implements the td rule specifically for IE < 9.

Answer №2

This code snippet below is used to handle table row styling specifically for Internet Explorer versions lower than 9:

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

However, for other browsers, the following CSS will take precedence and override the above style settings:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform the inline style attributes found in the HTML code into CSS styling

After creating a webpage using Bootstrap Studio, I realized that all the style attributes are inline and I want to move them to a separate CSS file. However, I am facing difficulty in doing so as when I add an image using 'background-image:url('i ...

jQuery cannot access a hidden CSS property

I'm working on a form for my new project and have assigned the same class to all input fields. In my CSS file, I've set the text to be capitalized and it displays correctly. However, when I use jQuery's .val() to get the value of the field, ...

Retrieving the data from the <input> tag using TypeScript

I'm currently working on retrieving user input values from a form. While vanilla JavaScript allows me to easily target elements and get their values using the .value method, I've encountered some challenges with TypeScript. Despite TypeScript bei ...

IE8 triggers automatic download upon receiving JSON response using jQuery

Can you help me make IE8 compatible with this code using jQuery to handle an ajax request that returns data as JSON? $.ajax({ url: formAction, type: 'post', dataType: 'json', data: form, success: ...

How can CSS be utilized to customize a data table by removing borders and adjusting the height of data cells?

Struggling with custom styling a Vuetify data table to remove borders and adjust cell height? Check out this CodePen example. new Vue({ el: '#app', data() { return { headers: [{ text: 'Dessert (100g serving)', ...

What are the steps for creating a grid layout with a logo header displayed at the top?

Hello everyone, I am new to using react native and I have a specific layout in mind that I would like to achieve. However, the code I currently have places the logo inside a grid. Here is the layout I am aiming for: https://i.sstatic.net/zkJcK.png impor ...

Encountering the React.Children.only error while trying to use the <Link> component in Next.js

I'm encountering an issue with the code below: Error: React.Children.only expected to receive a single React element child. While trying to troubleshoot, I noticed that it only allows me to have one header under the link. <div className="co ...

Encoding a string in JSON that contains the "#" symbol along with other special characters

The client side javascript code I have is as follows: <html> <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(document).ready(function() { //var parameters = "a=" + JSON.stringify( ...

Tips for implementing an `onclick` event on this specific button

I've utilized JavaScript to generate a button. Now, I'm wondering how to incorporate an onclick event for this button. var b1 = document.createElement("button"); b1.setAttribute("class", "btn btn-default"); b1.setAttribute("id", "viewdetails"); ...

What is the best way to customize a button component's className when importing it into another component?

Looking to customize a button based on the specific page it's imported on? Let's dive into my button component code: import React from "react"; import "./Button.css"; export interface Props { // List of props here } // Button component def ...

Observing the state of a variable within a directive using a service from a different module

I currently have two modules named "core" and "ui". The "ui" module has a dependency on the "core" module. Below is the code for my core.js file: var core = angular.module('core', [ 'ngRoute' ]); // Services core.service('httpI ...

Proceed the flow of event propagation using the react-aria button element

In the react-aria library, event bubbling for buttons is disabled. I am facing an issue where my button, which is nested inside a div that acts as a file uploader, does not trigger the file explorer when clicked due to event bubbling being disabled. How ...

Deciphering JSON data in a textarea following a POST request

I am struggling with decoding a JSON string in PHP and I have identified the problem causing it. However, I am unsure of how to fix it. My approach involves putting an array that I convert to JSON into a hidden textarea, which I then post along with other ...

Issue with the Backbone view's collection

I am currently learning the backbone framework and am facing an issue with my view. I am trying to gather user input from a form, use that data to update a collection, and then redirect the user. However, I am repeatedly encountering an undefined error, sp ...

What could be causing my Vue code to behave differently than anticipated?

There are a pair of components within the div. When both components are rendered together, clicking the button switches properly. However, when only one component is rendered, the switch behaves abnormally. Below is the code snippet: Base.vue <templa ...

Utilizing JavaScript and jQuery libraries in conjunction with periods

I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...

Is there a method in JavaScript/jQuery to gently push or flick the scroll so that it can be easily interrupted by the user? Further details are provided below

I am looking for a solution in javascript that will allow the page to automatically scroll down slightly, but I also want the user to be able to interrupt this scroll. When using jquery for auto-scrolling, if the user begins manual scrolling while the ani ...

Transforming DOM elements into Objects

Here are some values that I have: <input name="Document[0][category]" value="12" type="text"> <input name="Document[0][filename]" value="abca.png" type="text" > I am looking for a way to convert them into an object using JavaScript or jQuer ...

Achieving functionality with dropdown menus in jQuery

I am facing an issue with a dropdown menu that works perfectly in jsFiddle during testing, but does not function as expected when I run it on my testing server. jsFiddle: http://jsfiddle.net/cyberjo50/39bu8/2/ HTML <!doctype html> <html> < ...

Ant design of the card

I am struggling to make the image appear in full width within the ant design card component. import React, { useState, useEffect } from 'react'; import uno from '../images/dualComida.jpg' import { Button, Space, Typography, ...