jQuery tablesorter плагин - сохраняет альтернативные цвета строки
HSV (Оттенок / Насыщенность / Значение) также названный HSL (Оттенок / Насыщенность / Легкость) является просто различным цветным представлением.
Используя это представление он легче скорректировать яркость. Поэтому преобразуйте от RGB до HSV, украсьте эти 'V', затем преобразуйте назад в RGB.
Ниже некоторый код C для преобразования
void RGBToHSV(unsigned char cr, unsigned char cg, unsigned char cb,double *ph,double *ps,double *pv)
{
double r,g,b;
double max, min, delta;
/* convert RGB to [0,1] */
r = (double)cr/255.0f;
g = (double)cg/255.0f;
b = (double)cb/255.0f;
max = MAXx(r,(MAXx(g,b)));
min = MINx(r,(MINx(g,b)));
pv[0] = max;
/* Calculate saturation */
if (max != 0.0)
ps[0] = (max-min)/max;
else
ps[0] = 0.0;
if (ps[0] == 0.0)
{
ph[0] = 0.0f; //UNDEFINED;
return;
}
/* chromatic case: Saturation is not 0, so determine hue */
delta = max-min;
if (r==max)
{
ph[0] = (g-b)/delta;
}
else if (g==max)
{
ph[0] = 2.0 + (b-r)/delta;
}
else if (b==max)
{
ph[0] = 4.0 + (r-g)/delta;
}
ph[0] = ph[0] * 60.0;
if (ph[0] < 0.0)
ph[0] += 360.0;
}
void HSVToRGB(double h,double s,double v,unsigned char *pr,unsigned char *pg,unsigned char *pb)
{
int i;
double f, p, q, t;
double r,g,b;
if( s == 0 )
{
// achromatic (grey)
r = g = b = v;
}
else
{
h /= 60; // sector 0 to 5
i = (int)floor( h );
f = h - i; // factorial part of h
p = v * ( 1 - s );
q = v * ( 1 - s * f );
t = v * ( 1 - s * ( 1 - f ) );
switch( i )
{
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3:
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
default: // case 5:
r = v;
g = p;
b = q;
break;
}
}
r*=255;
g*=255;
b*=255;
pr[0]=(unsigned char)r;
pg[0]=(unsigned char)g;
pb[0]=(unsigned char)b;
}
3 ответа
There's already a default widget zebra, built into the core, which applies the classes odd and even to alternate rows. It works whether or not you have added class=even/odd to the html file.
It's really easy to set up. I simply followed the instructions on the table sorter website, and then modified the document ready function to the following:
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter({
widgets: ['zebra']
});
}
);
</script>
I made an example while answering the question. You can view the result in action, or see the example code.
На основе ответа Энтони, но перефразированного как однострочный (в основном):
function fixStripes() {
$('table tr').removeClass('odd even')
.filter(':even').addClass('even').end()
.filter(':odd').addClass('odd');
}
$("table").bind("sort", fixStripes);
Вызовы JQuery могут быть "связаны", как указано выше, с использованием таких операций, как filter () для ограничения выбранных элементов и .end () для «сброса» до последнего выбора. Другими словами, каждый .end () «отменяет» предыдущий .filter () . Последний .end () не используется, так как после этого делать нечего.
Как насчет:
function fixStripes() {
var i = 0;
var rowclass;
$("table tr").each(function() {
$(this).removeClass("odd even");
rowclass = (i%2 == 1) ? "odd" : "even";
$(this).addClass(rowClass);
});
}
$("table").bind("sort", fixStripes);
О, и если вам нужно действительно простое исправление, вы можете задержать дыхание, чтобы этот псевдокласс CSS был подхвачен всеми основными браузерами:
table tr:nth-child(n+1) {
color: #ccc;
}
Но мое предположение основано на том, как FF и Компания обрабатывает CSS для динамического HTML, она установит загрузку ваших полосок, но не применит CSS после сортировки. Но я хочу знать наверняка.