I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue.
Using nth-child seems like an option, but it can get quite verbose if I need to select a larger range of rows, like 20-50. Is there a more efficient way to target rows 20-50 and assign them a color?
<table id="table">
<tr>
<!-- content -->
</tr>
<!-- 100 tr elements here -->
</table>
It's essential to assign specific
CSSstyles to each group
Take a look at this Snippet
tr:nth-child(n+0) {
background: blue;
}
tr:nth-child(n+10) {
background: red;
}
tr:nth-child(n+20) {
background: yellow;
}
tr:nth-child(n+50) {
background: grey;
}<table style="width:100%">
<tr>
<td>Bill Gates</td>
</tr>
<tr>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<tr>
<td>Bill Gates</td>
</tr>
<tr>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<tr>
<td>Bill Gates</td>
</tr>
<tr>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<tr>
<td>Bill Gates</td>
</tr>
<tr>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<!-- Additional rows here -->
</table>To enhance the design, you can modify the CSS code as shown below:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
With this adjustment, alternating rows will have different background colors.
If you need more than just two color options, you can utilize the formula (an + b), where a represents the cycle size, n is a counter that starts at 0, and b is an offset value. For example, to assign background colors to every third row, use the following code:
tr:nth-child(3n+0) {background:#999;}
tr:nth-child(3n+1) {background:#CCC;}
tr:nth-child(3n+2) {background:#FFF;}
I am currently working on incorporating an element into an existing SVG file. Interestingly, the process runs smoothly on Chrome and Firefox but encounters issues on Edge. I aim for it to function seamlessly on the latest versions of all three browsers, wi ...
I am facing an issue with an HTML <input> field that displays autocomplete suggestions while the user is typing. I want to create an automated test using Selenium, where the driver inputs keys and then verifies the contents of the autocomplete dropdo ...
Apologies if my question seems confusing, I am currently in the process of grasping ajax, JavaScript, and jQuery. Here is my query: Below you can find a snippet of my javascript code: if (colorToCheck == gup("Player1")) { document.getElementById(&apo ...
This is the coding for the online shopping cart: <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8" /> <title>Online Shopping Cart</title> <script src="jquery-3.1.1.min.js"></script> ...
I want to incorporate "~/" and have it resolved on the client side. Here is an example of what I am trying to do: <a href="~/page.aspx">website link</a> <img src="~/page.aspx" /> In my ASP.NET code, I have my base URLs set up like this ...
I'm encountering an issue where I am unable to retrieve the src attribute of an image that I created using the .append method in jQuery. Strangely, I can obtain the src when directly typing the element in the HTML file but not when appending it. Essen ...
We are encountering a minor issue with Jquery while loading numerous ajax files in our system. Currently, we are using Jquery 2.x and need to be able to operate offline on IE 9+. Previously, when working with Jquery 1.x, we were able to load ajax files fro ...
I'm currently working on a situation where I need to transfer items from one select element to another, but only if they are not already in the second select: $('#srcSelect option:selected').appendTo('#dstSelect') My challenge is ...
I am interested in converting my reactjs class to a functional programming approach rather than using OOP. Can anyone provide guidance on how to achieve this? Please refer to my code snippet below. import * as h from './hydraulic'; const vertic ...
Currently, I am working on an Angular application that is designed to keep track of tuxedo rentals. The main feature of the app is a table that displays information from an array stored in the controller. The initial task I completed was listing the items ...
Having trouble with the spacing in my latest markup update. Here's what I have: <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-la ...
I am trying to paint the actual HTML code within a tag using JavaScript but escaping it doesn't seem to be working. function displayHTMLString(n){ document.write("'<table>'"); for (i in range(0,n)){ ...
Currently, I am developing a one-page website with ReactJS. Each section of the site is created as individual React components, which are displayed conditionally based on the user's tab selection in the navigation bar. As part of my design, I have in ...
Attempting to retrieve products from Shopify using the Admin API (GraphQL) through my frontend. I utilized the following code: *I implemented "axios" on Quasar Framework, utilizing Headless Commerce const response = await this.$axios({ url: "https: ...
Just diving into this realm, so please have patience with me. I've got an external js file linked in my HTML. The JS code is solid and functions properly in Fiddle - https://jsfiddle.net/0hu4fs4y/ <script src="js/noti.js"></script> <sc ...
After clicking the 'equal' button, the result is displayed. However, if I click another number, it doesn't clear the result. I want the result to stay when operation symbols like '+' or '/' are pressed. While working on t ...
Hey there! I've been experimenting with the react-bootstrap library recently, trying to get better at using it. While going through the tutorial, I came across some ES6 code that caught my attention. function FieldGroup({ id, label, help, ...props } ...
Check out this link to see the window style I'm trying to recreate using HTML, CSS, and Javascript. No Jquery needed. Thank you in advance. ...
I am encountering issues with MUI while attempting to customize the color of my buttons. The two methods I have tried so far have been unsuccessful. For example, Method 1: import React from 'react' import { Typography } from '@mui/material& ...
I encountered an error stating "ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." This is my TypeScript file: this.list = data.json(); ...