Styling CSS for Grouped Rows in Tables

Question

Styling CSS for Grouped Rows in Tables

I need help with styling a table that contains variable data, grouped by columns (Month and Year).

My goal is to alternate row colors for each group of data. For example, all rows under Feb 2016 would have class=a, the next set of data would have class=b, and so on. It's like an odd/even pattern but applied to multiple rows based on their values.

https://i.sstatic.net/hwn37.png

In the image above, there are 3 datasets: Feb 2016, June 2016, Jan 2017. The first 4 rows would have class=a, rows 5 and 6 would have class=b, and the last row would go back to class=a.

Although I managed to do a simple alternating row color scheme, this task seems more complex.

Here is the dataset in a fiddle: https://jsfiddle.net/yo04vxoa/

Any guidance on how to achieve the desired result shown here: https://jsfiddle.net/yo04vxoa/3/ would be greatly appreciated!

I'm struggling to correctly assign classes to rows based on similar data in the month/year columns. Any assistance would be helpful.

javascript jquery css

Answer 1

Answer №1

If you're searching for a solution, this code snippet should provide what you need: 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>'
})

By comparing the current field with the previous one, you can determine when to add an alternate modifier class:

Answer 2

If you're searching for a solution, this code snippet should provide what you need: 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>'
})

By comparing the current field with the previous one, you can determine when to add an alternate modifier class:

Answer 3

Answer №2

One way to achieve a similar result is by implementing the following code snippet:

let flip = false;
let flipType = 'even';
$('table tbody tr').each(function(index)
{    
   let current = $('table tbody tr').eq(index).find('td').eq(2).text();
   let 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);
    }
});

For an example, you can visit: https://jsfiddle.net/DinoMyte/yo04vxoa/6/

Answer 4

One way to achieve a similar result is by implementing the following code snippet:

let flip = false;
let flipType = 'even';
$('table tbody tr').each(function(index)
{    
   let current = $('table tbody tr').eq(index).find('td').eq(2).text();
   let 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);
    }
});

For an example, you can visit: https://jsfiddle.net/DinoMyte/yo04vxoa/6/

Answer 5

Answer №3

Take a look at https://jsfiddle.net/yo04vxoa/7/

This script dynamically assigns classes to table rows after the table has been created. A hidden column was introduced in the table to store the month and year information for each row, which is then used to create an array of elements. The script then iterates over this array, changing the color class based on the stored values.

Here's the new column added:

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

And here is the code snippet:

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);
});

Answer 6

Take a look at https://jsfiddle.net/yo04vxoa/7/

This script dynamically assigns classes to table rows after the table has been created. A hidden column was introduced in the table to store the month and year information for each row, which is then used to create an array of elements. The script then iterates over this array, changing the color class based on the stored values.

Here's the new column added:

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

And here is the code snippet:

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);
});

Styling CSS for Grouped Rows in Tables

Answer №1

Answer №2

Answer №3

Similar questions

How can I adjust the position of a circular progress bar using media queries?

How to stop empty numbers in angular.js

There seems to be a problem with the external JavaScript file not functioning

Set the state of a nested array object within SectionList data using the index

Update the text content of an HTML element by fetching data from a database using AJAX and JQuery based on its

Ways to extract the directive's value specific to my scenario

Trouble linking HTML, Javascript, and CSS - seeking help to get them working properly

When using v-select to search for items, the selected items mysteriously vanish from

Reset ng-model when ng-show is not active in AngularJS

How to center a span using Twitter Bootstrap

When working with mongoose, express, node.js, and javascript, sometimes a

Having trouble triggering a click event on Ant Design menu button using jest and enzyme

Using JQuery AJAX and an ASP.NET handler to upload files

PHP is returning a null value as the last value, but JQuery is able to correctly select the last row from the

Stop the browser from displaying a customized frameset within the document of an iframe

Is there a way to display my array within my React component using JavaScript?

Combining various data types within a single field in BigQuery

AWS Lambda Error: Module not found - please check the file path '/var/task/index'

The background image fails to display

Displaying information from a Node.js server on a React frontend