jQuery.addClass working in Chrome but not IE11

Question

I'm working with a "new item" form for a SharePoint survey.

In Chrome, the following code shows an alertbox and then makes every other row darker.

In IE 11, the following code shows an alertbox but doesn't change the appearance.

Why?

<style type="text/css">
    .oddrow { background : #eee9e9 !important;}
</style>

<script src="../../SiteAssets/jquery.min.js"></script>
<script type=text/javascript>

function addOddRowStripe() {
    alert("Hello World");
    // Why doesn't IE like the next line?
    jQuery("td.ms-formbodysurvey table tbody tr:odd").addClass("oddrow");
};

_spBodyOnLoadFunctionNames.push("addOddRowStripe");

</script>

Answer 1

Wich version of jQuery are you using? Try to use the latest.

Or try to examine that the selected items are not empty:

var oddRows = jQuery("td.ms-formbodysurvey table tbody tr:odd");
if (oddRows.length > 0){
  oddRows.addClass("oddrow");
}  else {
  alert("No items found.")
}

Answer 2

I would recommend just using

$(document).ready(addOddRowStripe);

or alternatively

SP.SOD.executeOrDelayUntilScriptLoaded(addOddRowStripe, "sp.js");

Never looked at the implementation of both, but they are reliable across most modern browsers in my experience.

I think the onload-event your are attaching your funtion to is more equivalent of jQuery's .load()-behavior.

Off-Topic: If you just want to color every odd row in another color, you might want to consider just using CSS like this:

tr:nth-child(even) { background: #AAA }
tr:nth-child(odd) { background: #BBB }

Works in all modern browsers.

Answer 3

silly question but why are you trying to do it via js? why not just have it in css only reducing your code load

tr:nth-child(even) {
  background-color: #eee9e9;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child