Question

我有一个可以包含可变数据量的表。在此表中，我有两列（月和年），我们将数据分组。

我正在尝试为每个分组数据集替换行的颜色。例如，Feb 2016中的所有内容都会class=a，然后是下一组数据class=b，然后返回a等。基本上是奇数/偶数但基于多行其中的价值观。

在上图中，将有3组数据。 Feb 2016，June 2016，Jan 2017。前4行为class=a，5＆amp; 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);
});

分组表行的CSS样式

3 个答案: