jQuery alternatate rows color - IE problem

Question

Hi,

Why is it that this code:

$('#tbl tr:odd').css('background-color', '#f6f6f6');
$('#tbl tr:even').css('background-color', '#cccccc');

works fine outside of the plugin in all browsers. While the same code:

$('tr:odd', $this).css('background-color', options.tr_odd_bgcolor);
$('tr:even', $this).css('background-color', options.tr_even_bgcolor);

doesn't color rows at all in any version of IE where $this refers to table specified in wrapped set and options.tr_odd_bgcolor refers to color for example green.

The plugin styling does apply in all browsers except for IE.

Here is the plugin code for your reference:

    (function($){
        $.fn.styleTable = function(settings){
            var opts = $.extend({}, $.fn.styleTable.defaults, settings);

            return this.each(function(settings){
               var options = $.extend({}, opts, $(this).data());
               var $this = $(this);

           $('tr:odd', $this).css('background-color', options.tr_odd_bgcolor);
           $('tr:even', $this).css('background-color', options.tr_even_bgcolor);
            });
        }

      $.fn.styleTable.defaults = {
        tr_odd_bgcolor: '#f6f6f6',
        tr_even_bgcolor: '#fff'
      }

})(jQuery);

Answer 1

I don't think $this is valid. You should be using either $(this) which takes the current DOM element in context and turns it into a jQuery object, or this, which is the standard Javascript way to access the current object instance in whose context you are executing. $this isn't valid Javascript at all. Did you perhaps make a typo in your question?

Answer 2

It seems to be a bug in the plugin. Without debugging I just rewrote the plugin using another as a base and it works fine in IE8 now.

http://jsbin.com/oxaxi3

Odd that when you click "preview" in jsbin it doesn't seem to work, but when you just view the base url as I pasted above it works fine.