Comments (6)
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.
Related Issues (20)
- Wrong behavior when stupid_table is inside an other table (bug) HOT 3
- Sorting - Remembering? HOT 2
- NFR: Mark the initializer of the table HOT 1
- Can't sort multiple float columns. Only 1 works HOT 1
- default sorting HOT 1
- Request for a new maintainer HOT 1
- Resort table HOT 3
- Sorting only works when there is more than 2 rows HOT 8
- Doesn't work at all...
- Doesn't sort properly... HOT 4
- Next row doesn't have columns, so I get a "b is undefined" error. Can I sort on every other row?
- Sort IP Address HOT 1
- Incorrect sorting of columns containing word+number, and numbers containing spaces. HOT 3
- data-sort-value clearing 0 values HOT 1
- Does not sort properly HOT 5
- How to sort a dynamically created table (by ajax)? HOT 2
- Cannot read property 'string' of undefined HOT 1
- Problems with data-sort-value
- possible to specify an element trigger sorting other than default TH?
- Is it possible to add div element inside Stupid Table?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stupid-table-plugin.