0

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>
1
  • In the IE11 debug tools, is it not showing any errors on page load?
    – BigRaj
    Jun 7, 2019 at 13:19

3 Answers 3

0

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.")
}
2
  • I'm using jQuery 3.3.1. Your code also works in Chrome but not IE11.
    – LFurness
    Oct 9, 2018 at 17:36
  • I should also add that none of the items were empty.
    – LFurness
    Oct 10, 2018 at 19:17
0

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.

1
  • $(document).ready(addOddRowStripe); also works in Chrome but not IE. Regarding executeOrDelayUntilScriptLoaded, what is the point of using an external JavaScript file here instead of just putting the code in the existing file?
    – LFurness
    Oct 9, 2018 at 17:23
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.