分組表行的CSS樣式

Question

我有一個表，可以包含可變數量的數據。 在此表中，我有兩列（月份和年份），這些列是我們對數據進行分組的依據。

我正在嘗試為每個分組數據集替換行的顏色。 例如， Feb 2016年Feb 2016所有數據都將具有class=a然后是下一組數據class=b ，然后返回a 。本質上是奇數/偶數，但基於其中的值在多行上。

在上圖中，將有3組數據。 Feb 2016 ， June 2016 Feb 2016 June 2016 ， Jan 2017 June 2016 Jan 2017 前4行將為class=a ，5＆6將為class=b ，最后7行將為class=a 。

我能夠進行標准的奇/偶交替行，但這還不止於此。

這是數據集的小提琴： https : //jsfiddle.net/yo04vxoa/

任何幫助或指示將不勝感激！

編輯：

這是期望的結果： https : //jsfiddle.net/yo04vxoa/3/

只是不確定如何通過按月/年對相似數據進行分組來正確地獲取這些類。

Answer 1

這應該給您您想要的東西： https : //jsfiddle.net/nx35pdwa/4/

$(data).find('requests').each(function() {
    var $p = $(this.previousElementSibling);
    if (this.previousElementSibling &&
        ($p.find('month').text() !== $(this).find('month').text() ||
         $p.find('year').text() !== $(this).find('year').text() )) {
      alt = !alt;
    }
    output += '<tr' + (alt ? ' class="alt" ' : '') + '>';
    output += '<td>' + $(this).find('month').text() + '</td>';
    output += '<td>' + $(this).find('year').text() + '</td>';
    output += '<td>' + $(this).find('title').text() + '</td>';
    output += '</tr>'
})

通過將當前迭代與先前迭代中的字段進行比較，可以確定是否需要替換修飾符類：

Answer 2

您可以這樣做：

var flip = false;
var flipType = 'even';
$('table tbody tr').each(function(index)
{    
   var current = $('table tbody tr').eq(index).find('td').eq(2).text();
   var next = $('table tbody tr').eq(index + 1).find('td').eq(2).text();
   if(next != ""){
    if(current == next){
      if(flip)
        $(this).addClass("odd");
      else
         $(this).addClass("even");
   }
   else {
      $(this).addClass(flipType);
      flipType = "even" ? "odd" : "even";
      flip = true;
    }
  }
  else 
  {
    flipType = "odd" ? "even" : "odd";  
    $(this).addClass(flipType);
    }
});

范例： https : //jsfiddle.net/DinoMyte/yo04vxoa/6/

Answer 3

參見https://jsfiddle.net/yo04vxoa/7/

生成表后，這將添加類。 我在表中添加了一個新的隱藏列以容納每一行的月份年份，然后將元素添加到數組中並對其進行迭代以更改顏色類。

新欄：

<th style="display:none;">ColourDate</th>

碼：

var myVals = [];
$(".dateColour").each(function(){
  myVals.push( { el: $(this), t: $(this).text()});
});

var lastVal = myVals[0].t;
var myClass = 'a';

$.each(myVals, function(i, e){
    if (e.t !== lastVal){
        lastVal = e.t;
        myClass = myClass == 'a'? 'b' : 'a';
    }
  e.el.parent().addClass(myClass);
});