stylized tables with assorted colored categories

Here is the layout of my table:

Grade   Sign    StudentGrade
6       +       1
6               0
6       -       0
5       +       0
5               0
5       -       0
4       +       0
4               0
4       -       1
3       +       0
3               1
3       -       0
2       +       1
2               0
2       -       0
1       +       0
1               1
1       -       0

This is how my HTML table looks:

<tr *ngFor="let item of gradeList;">
    <td colspan="3" class="labelStyle" style="text-align:center">{{item.grade}}</td>
    <td colspan="3" class="labelStyle" style="text-align:center" *ngIf="item.sign == 0"></td>
    <td colspan="3" class="labelStyle" style="text-align:center" *ngIf="item.sign == 1">+</td>
    <td colspan="3" class="labelStyle" style="text-align:center" *ngIf="item.sign < 0">-</td>
    <td colspan="2" class="labelStyle" style="text-align:center">{{item.studentGrade}}</td>
</tr>

I am looking to dynamically assign colors to my table rows based on the grade. For example, I want the first 3 rows with grade 6 to be light grey, the next 3 rows with grade 5 to have the default color, and so on. How can I achieve this dynamically?

htmlcssbootstrap-4

Answer №1

an effective solution involves leveraging the :nth-child() selector along with the n-variable. The example below uses 6n to achieve the desired effect.

tr:nth-child(6n+2),
tr:nth-child(6n+3),
tr:nth-child(6n+4) {
  color: red;
}
<table>
  <tr>
    <td>Grade</td>
    <td>Sign</td>
    <td>Student Grade</td>
  </tr>
  <tr>
    <td>6</td>
    <td>+</td>
    <td>1</td>
  </tr>
  <tr>
    <td>6</td>
    <td></td>
    <td>0</td>
  </tr>
  <tr>
    <td>6</td>
    <td>-</td>
    <td>0</td>
  </tr>
  <tr>
    <td>5</td>
    <td>+</td>
    <td>0</td>
  </tr>
  <tr>
    <td>5</td>
    <td></td>
    <td>0</td>
  </tr>
  <tr>
    <td>5</td>
    <td>-</td>
    <td>0</td>
  </tr>
  <tr>
    <td>4</td>
    <td>+</td>
    <td>0</td>
  </tr>
  <tr>
    <td>4</td>
    <td></td>
    <td>0</td>
  </tr>
  <tr>
    <td>4</td>
    <td>-</td>
    <td>0</td>
  </tr>
  <tr>
    <td>3</td>
    <td>+</td>
    <td>0</td>
  </tr>
  <tr>
    <td>3</td>
    <td></td>
    <td>0</td>
  </tr>
  <tr>
    <td>3</td>
    <td>-</td>
    <td>0</td>
  </tr>
  <tr>
     ...
    <td>1</td>
    <td>-</td>
    <td>0</td>
  </tr>
</table>

Answer №2

To dynamically change the background color of table rows based on the content of the cells, JavaScript can be used.

let table = document.getElementById("grades-table");
let gradeColors = {
  '1': '#99f',
  '2': '#aaf',
  '3': '#bbf',
  '4': '#ccf',
  '5': '#ddf',
  '6': '#eef'
};
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   col = row.cells[0];
   row.style.backgroundColor = gradeColors[col.textContent];
}
table {
  font-family: sans-serif;
  border-collapse: collapse;
}
th {
  background: aliceblue;
  color: darkblue;
}
td, th {
  text-align: center;
  padding: .5em;
  border: 1px solid #999;
}
<table id="grades-table">
    <thead>
        <tr><th>Grade</th><th>Sign</th><th>StudentGrade</th></tr>
    </thead>
    <tbody>
        <tr><td>6</td><td>+</td><td>1</td></tr>
        <tr><td>6</td><td> </td><td>0</td></tr>
        <tr><td>6</td><td>-</td><td>0</td></tr>
        <tr><td>5</td><td>+</td><td>0</td></tr>
        <tr><td>5</td><td> </td><td>0</td></tr>
        <tr><td>5</td><td>-</td><td>0</td></tr>
        <tr><td>4</td><td>+</td><td>0</td></tr>
        <tr><td>4</td><td> </td><td>0</td></tr>
        <tr><td>4</td><td>-</td><td>1</td></tr>
        <tr><td>3</td><td>+</td><td>0</td></tr>
        <tr><td>3</td><td> </td><td>1</td></tr>
        <tr><td>3</td><td>-</td><td>0</td></tr>
        <tr><td>2</td><td>+</td><td>1</td></tr>
        <tr><td>2</td><td> </td><td>0</td></tr>
        <tr><td>2</td><td>-</td><td>0</td></tr>
        <tr><td>1</td><td>+</td><td>0</td></tr>
        <tr><td>1</td><td> </td><td>1</td></tr>
        <tr><td>1</td><td>-</td><td>0</td></tr>
    </tbody>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

creating and managing multiple redirect routes in vue.js application

const router = new VueRouter({ routes: [ {path: '*', redirect: '/'} } )} I have configured this as the default redirect route in my routes.js file. Now, I am wondering how I can set multiple redirect paths and trigger them ...

htmlvue.jsvuejs2

What is the best way to design a three-color column layout without any text?

I am attempting to design a three-color column layout using Bootstrap without any text. I have successfully created the columns with the desired colors, but I am facing an issue regarding how to remove the text without affecting the size of the columns. W ...

htmlcssbootstrap-4

Are there differences in alignment?

I'm looking to create a unique visual effect where text is aligned differently on each line, shifting left, right, center, or wherever else, with the alignment origin varying by just a few pixels. This would be perfect for adding some visual interest ...

javascripthtmlcss

Is it possible to obtain the vertex coordinates of an aframe box?

Is there a way to extract the vertex from an object (specifically a box) in AFRAME, or calculate the intersection between a raycaster and an entity's face? Any assistance would be greatly appreciated. Thank you! EDIT: I have included the code snippet ...

javascripthtmlthree.jsaframe

Mastering the fundamentals of integrating/augmenting a fresh template in Umbraco

Let me be completely honest. Umbraco is unlike any other CMS I have worked with before. I am currently struggling to grasp the proper method of creating a Template and integrating it into Umbraco. How exactly can I add a template? I am making changes to t ...

.netasp.netcsscontent-management-systemumbraco

firefox is experiencing lag issues with react-spring and framer-motion

Encountering an issue with two animation libraries, react-spring and framer-motion. Attempting to create a basic animation that triggers upon the component's initial visibility (simplified version). <motion.div initial={{x: -25, opacity: 0}} anima ...

cssreactjsanimationreact-springframer-motion

Container Slides Along Despite Accurate Measurements

In a recent project of mine, I utilized two containers positioned side by side. Upon clicking a button, my goal was to have the content container (essentially a false body) decrease its width while the menu container would slide in. Despite my best effort ...

htmlcss

"Android Webview's evaluateJavascript function is not returning the expected value

I am attempting to retrieve the username from a webview, but it is returning a null object. webView.settings.javaScriptEnabled = true webView.evaluateJavascript( "(function() { return document.getElementsByClassName('lgn-loginname') })() ...

javascriptandroidhtmlkotlinwebview

Sending an HTML form to an external ASP script

I am currently attempting to create an HTML form that can submit multiple variables to an external ASP file that generates a chat window. The given example I am working with can be viewed through this link, although it involves a two-step process. In the ...

javascripthtmlasp.net

Is the form being submitted with the href attribute?

Does this code ensure security? <form id="form-id"> <input type='text' name='name'> <input type='submit' value='Go' name='Go'/></form> <a href="#" onclick="docume ...

javascripthtml

XSL:include is failing to function properly

Here is the configuration I have set up: <?xml version="1.0"?> <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:include href="top.xsl"/> <xsl:template match=""> Content will be placed here - i ...

htmlcssxmlxsltweb

Efficient guide to unlock the secrets of JS height measurements

I've noticed that there are several different 'Height' related properties in JavaScript such as clientHeight, Window.height, scrollHeight, offsetHeight, and more. Although I have a general idea of what they do, I am seeking a formal and det ...

javascripthtmlcss

JavaScript Failing to Validate User Input in Form

I'm a beginner in JavaScript and I'm trying to validate a simple date of birth input, but for some reason, it seems that the JavaScript file is not working. No matter what I input, it always goes through, so I'm trying to figure out what&apo ...

javascripthtmlformsvalidation

Curating personalized designs within a content management system

Currently, I am developing a SaaS platform that will feature customized styles for user accounts. The current method involves using YAML to create unique stylesheets for each account. However, as the number of accounts increases, I am starting to question ...

csscontent-management-systemsaas

The art of placing images using CSS

I'm having trouble aligning the images into two rows of three, with the news section on the right side below the navigation bar. I've tried different methods but can't seem to get it right. Both the image and link should be clickable, but I& ...

htmlcss

As soon as a key is pressed in tinyMCE, the tracking continues until reaching the conclusion of the initial <

I am attempting to capture, in real-time, the user input in the .content textarea and paste it into the .intro. I have tried the following code without success: //This code is specifically for tinymce, as I am using tinyMCE as a rich text editor for textb ...

javascriptjqueryhtmltinymce

Issues persist with the textarea failing to update the longtext data field

I'm having trouble updating a longtext data cell in my database when I save and post to the same page using a simple form with a textarea. Despite not receiving any PHP errors, the database just doesn't seem to update and I can't figure out ...

phphtmlsql

CSS3 animations: the speed of transitioning between animations is sluggish

The slider I created has animations that are taking too long to transition between slides. I have tried adjusting the properties, but I can't seem to find the right one to control the speed of the transitions. /* Keyframes */ @-webkit-keyframes anim ...

csscss-transitionscss-animations

What is the process for adding an SVG image (icon) to the navigation bar of a Quarto document?

I am trying to incorporate an SVG icon into the navigation bar using Quarto, but I am facing difficulties in getting it to work. The code snippet from my _quarto.yml file looks like this: navbar: ... right: - icon: github href: https://github.com/ ...

htmlryamlnavbarquarto

Unable to adjust table, row, and cell heights in Outlook template due to HTML/CSS formatting issues

I'm struggling to make the height of the leftmost (commented) nested table adjust automatically based on the content in the right section. It displays correctly in Chrome, but does not stretch in Word/Outlook. Any ideas on how to fix this for Word/Ou ...

htmlcssoutlook