Choose every fourth row in the table

Question

Choose every fourth row in the table

Is there a way to alternate the background colors of selected groups of 4 rows in a table? I want to make one group red and the next group blue. Any suggestions or ideas on how to achieve this?

<table>
  <tr style="background-color: red;">
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr style="background-color: red;">
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr style="background-color: red;">
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr style="background-color: red;">
    <td>NAME</td><td>AGE</td>
  </tr>
  
  <tr style="background-color: blue;">
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr style="background-color: blue;">
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr style="background-color: blue;">
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr style="background-color: blue;">
    <td>NAME</td><td>AGE</td>
  </tr>
  
  <tr style="background-color: red;">
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr style="background-color: red;">
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr style="background-color: red;">
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr style="background-color: red;">
    <td>NAME</td><td>AGE</td>
  </tr>

javascript jquery html css

Answer 1

Answer №1

If you're interested in a CSS-only approach, here's a sample code snippet:

table tr:nth-of-type(n) {
  background: blue;
}

table tr:nth-of-type(8n),
table tr:nth-of-type(8n-1),
table tr:nth-of-type(8n-2),
table tr:nth-of-type(8n-3) {
  background: red;
}

<table>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  </table>

Answer 2

If you're interested in a CSS-only approach, here's a sample code snippet:

table tr:nth-of-type(n) {
  background: blue;
}

table tr:nth-of-type(8n),
table tr:nth-of-type(8n-1),
table tr:nth-of-type(8n-2),
table tr:nth-of-type(8n-3) {
  background: red;
}

<table>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  </table>

Answer 3

Answer №2

You have the option to utilize JS to gather all tr-elements and customize the background color of each row according to your preferences:

var trList = document.getElementsByTagName('tr');
var n = 0;
var color = 'pink';
for(var key in trList) {
var trElem = trList[key];
if( n > 3 ) {
  n = 0;
    color == 'pink' ? color = 'lightblue' : color = 'pink';
  }
  trElem.style.backgroundColor = color;
n++;
}

table { border-collapse:collapse; }
td { border: 1px solid #000; }

<table>
  <!--- odd -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  ...
  </tr>
</table>

https://jsfiddle.net/8cvpubto

Answer 4

You have the option to utilize JS to gather all tr-elements and customize the background color of each row according to your preferences:

var trList = document.getElementsByTagName('tr');
var n = 0;
var color = 'pink';
for(var key in trList) {
var trElem = trList[key];
if( n > 3 ) {
  n = 0;
    color == 'pink' ? color = 'lightblue' : color = 'pink';
  }
  trElem.style.backgroundColor = color;
n++;
}

table { border-collapse:collapse; }
td { border: 1px solid #000; }

<table>
  <!--- odd -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  ...
  </tr>
</table>

https://jsfiddle.net/8cvpubto

Choose every fourth row in the table

Answer №1

Answer №2

Similar questions

Executing a C# program that sends a web request without using JavaScript

Steps for pulling data from the Google Analytics query tool

Enhancing Accessibility of the 'Return to Top' Link

SuperAgent - Refresh the initial request with a new bearer token upon encountering unauthorized access

Guide to implementing CRUD operations on a remote MongoDB using Node.js

Implementing server authentication with Faye in Node.js

What is the process for embedding a 3D model using three.js into a specific div on a webpage?

Different Ways to Make Custom Checkboxes Overlap with Labels in CSS

Show validation error messages for radio buttons alongside images in a single row

Dynamic reloading of a div with form data using jQuery's AJAX functionality

CSS printing displays a blank bar in white color

Retrieve a file from an Express API using React with the help of Axios

Is there a way to alphabetically and numerically organize a table in vue.js?

The error message "404 Not found" is returned when attempting to retrieve a Google spreadsheet

Error: Attempting to create a 'guid' property on the 'option:selected' string is not possible and results in a TypeError

Identify the absence of search results in an Ajax request to the search page before rendering the HTML content

How do I activate the <li> tag using jQuery?

The method request.getParameter in Servlet may sometimes result in a null

What benefits are there to converting a jQuery application to Angular?

Using the "i" parameter in a Lodash for loop results in undefined, however, it functions properly with specific values set