tr Color properties about stupid-table-plugin HOT 6 CLOSED

This is a problem for CSS to solve, not HTML or JS. (And you shouldn't be using a bgcolor attribute anyway, that's been deprecated for years.) Here's a hint for CSS:

tr:nth-child(even) {
    background-color: #e0e0e0;
}
tr:nth-child(odd) {
    background-color: #d0d0d0;
}

Now whatever order the rows are in, the colours will alternate.

from stupid-table-plugin.

Thanks for reviewing this @svivian. Would you happen to be aware how far back nth-child goes in terms of compatibility? I'm not CSS savvy.

I'm asking because it may be worthwhile to at least expose an "even" class. This wouldn't add much weight to the plugin.

from stupid-table-plugin.

Strange, I thought it worked in at least IE8 but according to quirksmode it's only IE9 and up. It's been supported for years in other browsers.

So it may be worth adding even/odd classes, though I'm not sure of the 'weight' in terms of actually updating all the classes on every sort. Personally I've been using nth-child for ages as progressive enhancement only (the borders are fine for older browsers). An alternative for others is to use selectivizr to polyfill support for the selectors.

from stupid-table-plugin.

I did a naive little benchmark. http://jsfiddle.net/JoeQuery/tZkvR/1/

I have a decent desktop, so 1000 addClasses is around 8ms. On my iPhone 3GS, it's around 120ms. removeClass takes just as long, and possibly longer. This was a lot more time consuming than I thought it would be.

The worst case scenario is reversing the sort when there are an even number of rows. Evens become odds and odds become evens.

0 A F
1 B E
2 C D
3 D C
4 E B
5 F A

So for n rows, we'll have n removeClasses and n addClasses. We can save half the time by just agreeing that anything that isn't odd is even. So you can style like so and get the same effect.

# mytable tr {
    background-color: white
}

# mytable tr.even{
    background-color: lightblue
}

It mainly becomes a question of whether we should plan for large data sets.

from stupid-table-plugin.

Hi, joequery, your StupidTable is just the thing I was searching for! It almost completely matches to my needs, and the only thing I've added is even / odd highlighting.
Say, In the HEAD section we add the globally working "striper":

/**
 * Easy but non-flexible global table.zebra striping.
 * Normally add to your CSS either .even or .odd, not both :)
 */
$(function() {
    $('table.zebra-even tr:even').not(':first').addClass('ez-even');
    $('table.zebra-odd tr:odd').addClass('ez-odd');
});

(It is more convenient for me to mark odd rows if table has no THEAD)

Now the table sorter will shuffle rows with assigned classes, so we have to re-assign them within the new set of table rows.
First, we need to get the name of class - just add new option to the options array:

sortFns = $.extend({}, {
...
...
"even":null
}, sortFns);

Now after

var sortedTRs = $(apply_sort_map(trs, theMap));

we can add:
(Tabs are saved to easy copy-paste into existing code :) )

            // Re-assign class to mark even / odd rows
            if (typeof sortFns.even == 'string') {
                var even = sortFns.even;
                sortedTRs.each(function(index, TR) {
                    var cls = $(TR).attr("class");
                    if (cls){
                        cls = cls.split(/\s+/);
                        if ($.inArray(even, cls) != -1) {
                            if (cls.length == 1) {
                                $(TR).removeAttr("class")
                            }
                            else {
                                $(TR).removeClass(even);
                            }
                        }
                    }
                    if ((index+1)%2 == 0) {
                        $(TR).addClass(even);
                    }
                });
            }

Done!

Modified code: https://dl.dropbox.com/u/21872445/web-dev/jquery.stupidtable.js

P.S. I use Stupid Table only in default configuration, so I don't know, will be everything ok in case of custom data types.
Concerning benchmarking, your tests shows that this solution can be used at least for relatively "lightweight" tables, isn't it?

from stupid-table-plugin.

With the recent addition of callback support, it's fairly easy to come up with your own even/odd class addition callback. I'm going to declare this request out of the scope of the plugin, but I appreciate everyone's opinions on the matter :)

from stupid-table-plugin.