Changing colors in the rows of a table

Here is a fiddle I created to demonstrate my issue.

https://jsfiddle.net/7w3c384f/8/

In the fiddle, you can see that my numbered list has alternating colors achieved through the following jQuery code:

$(document).ready(function(){
  $("tr:even").css("background-color", "#606060");
  $("tr:odd").css("background-color", "#404040");
});

However, this styling only applies to the numbered list and not the columns to the right of it. I am looking for a way to target only those specific <tr> elements. How can I achieve this?

javascriptjqueryhtmlcss

Answer №1

If you're interested in the CSS version only, you can experiment with something similar to this approach.

--UPDATE---

To see the desired outcome, be sure to include the thead and tbody tags.

<table class="custom_border_table">
    <thead>
        <tr>
            <th class="custom_table_number_th">ROUND</th>
            <th class="custom_table_th">Player1</th>
            <th class="custom_table_th">Player2</th>
            <th class="custom_table_th">Player3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="customBorder">1</div>
            </td>
            <td class="custom_table_td">Joe - A</td>
            <td class="custom_table_td">Bob - B</td>
            <td class="custom_table_td">Tom - C</td>
        </tr>
        <tr>
            <td>
                <div class="customBorder">1</div>
            </td>
            <td class="custom_table_td">Betty - B</td>
            <td class="custom_table_td"></td>
            <td class="custom_table_td"></td>
        </tr>
    </tbody>
</table>

.custom_border_table {
    border: 3px solid #606060;
    margin: 50px 5%;
    width: 90%;
    background-color: #404040;
    border-collapse: collapse;
}
.custom_table_th {
    background-color: #606060;
    color: #FFFFFF;
    width: 14%;
    border-collapse: collapse;
    text-align: center;
    font-weight: bold;
    line-height: 2em;
}
.custom_table_number_th {
    background-color: #606060;
    color: #FFFFFF;
    width: 5%;
    border-collapse: collapse;
    text-align: center;
}

td {
    color: #FFFFFF;
    width: 14%;
    text-align: center;
    border: 1px solid black;
}
td > div {
    display: block;
    margin: 15px;
    text-align: center;
    padding: 8px;
    color: #FFFFFF;
}
tr > td{
    background-color: #404040;
}
tr:nth-child(even) > td{
    background-color: #CF000F;
}
tr:nth-child(even) > td:first-child{
    background-color: red;
}


JSFiddle

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

Guide on sending a key to a text input field using JavaScript

How can I simulate sending a combination of keys (such as Ctrl+C or Alt+Shift) when the cursor enters an input text field using Javascript? I am not utilizing jQuery, but rather MS-Ajax. Is it achievable with MS-Ajax DOM? EDIT 1) Following @Ghostoy&apos ...

javascripthtmlajax

What would be the most appropriate namespace to utilize for jQuery widgets?

As I delve into the introductory material on building plugins with the jquery ui widget factory, one key aspect that stands out is the use of a namespaced name: $.widget( 'dp.list', { This raises some questions for me... Is having a namespace ...

jqueryjquery-uinamespaceswidget

Tips for displaying personalized error messages from your REST API in a JavaScript client

I'm utilizing a Java REST API that has been generated using swagger. If the client is unauthorized, I am sending custom error messages in response. public Response collaborationCollabIdDelete(Integer collabId, SecurityContext securityContext, Str ...

javascriptjavarestswagger

Implementing a modal component into a React JS page upon loading

I've been working on a webpage using React JS. The site's structure follows MainContent.js --> Main.js --> ReactDOM render. I recently tried to implement a modal popup that worked perfectly in its own project, but ran into issues when impor ...

cssreactjsmodal-dialogbootstrap-modal

Creating crypto.createCipheriv arguments from fixed origins

Currently, I am implementing a code snippet in my node.js application to perform string encryption. I am seeking guidance on how to create the KEY and HMAC_KEY from a predetermined source. At the moment, these keys are randomly generated within the progra ...

javascriptnode.jssecurityencodingcryptography

Creating an HTML5 video tag with bearer authentication using a WebAPI: The ultimate guide

My ASP.NET WebAPI requires bearer authentication, and most of my requests towards the API follow this format: GET http://localhost:29080/api/v1/users/me HTTP/1.1 Host: localhost:29080 Connection: keep-alive Accept: application/json, text/plain, */* Origin ...

javascriptangularauthenticationasp.net-web-apicors

Next/image is encountering an error due to an invalid Element type being generated

Trying to utilize the next/image feature to display an SVG image is causing me some trouble. Every time I attempt this, an error message pops up: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite ...

javascriptnext.js

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

I'm working on incorporating a terminal/console feature into my website. I came across the JavaScript functions for scrolling down a page, namely window.scrollTo(0,document.body.scrollHeight); and window.scrollTo(0,document.querySelector(".fakeSc ...

javascripthtmlcssscroll

How to control the audio currentTime using Angular 2 component

Here is the HTML code snippet that creates an HTML5 audio element: <audio id ="audio2" controls="controls" autoplay="false" (canplay)="CanPlay($event)"> <source src="http://localhost:51657/Audio/1" type="audio/mp3"> </audio> In the ...

htmlangularhtml5-audioangular2-template

Having trouble vertically aligning text in Bootstrap 4?

I'm having trouble getting the text to align vertically in the middle and closer to the image. The vertical-align:middle property doesn't seem to be working for me. Additionally, when I resize the screen width, the layout changes from a horizonta ...

htmlcssbootstrap-4

Different time parameter for setting a timeout in Javascript

I am struggling to create a slideshow with varying time intervals for each image. My knowledge of Javascript is limited, and I have been working on resolving this issue for quite some time. /* function ShowEffect(element){ new Effect.Appear(element, ...

javascripthtml

Encountering difficulties with the functionality of Google Places API

I am attempting to incorporate the autocomplete functionality of Google Places API into a text field. Below is the code I have implemented: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script ...

javascripthtmlgoogle-maps-api-3

Is it possible to integrate Firebase Storage into a TypeScript/HTML/CSS project without the use of Angular or React?

For my project, I am aiming to create a login and register page using TypeScript. Currently, my code is functioning well even without a database. However, I would like to implement Firebase for storing user credentials so that the login process becomes mor ...

javascripthtmltypescriptfirebasefirebase-storage

The input box is not properly filled with the complete string using protractor sendKeys

[HTTP] --> POST /wd/hub/session/ffcd7072-9f96-45cb-a61d-ec53fc696b56/element/0.9513211246393813-32/value {"value":["1","0","0","0","1"],"text":"10001"} My JavaScript code snippet: this.zipcode = element(by.model('personalInfo.zipcode')); t ...

javascriptseleniumprotractor

JavaScript - Image style alterations are not operating as expected

Let me break it down for you: onmouseover="imageOn(bg-index);" onmouseout="imageOff(bg-index);" I've got these two attributes set on a table tagged with ID table-title. These functions are included in an external JS file: If the name is 'bg-i ...

javascripthtmlcssimage

Adaptable Semantic UI form design

Welcome, internet friends! If anyone out there has a moment to spare and is familiar with Semantic UI, I could really use some assistance... Currently, I am working on a form that looks great on larger screens like this: https://i.stack.imgur.com/cafc5.j ...

javascripthtmlcssresponsive-designsemantic-ui

Guide on updating the URL for the login page in the Next-Auth configuration

I successfully integrated authentication using Next-Auth in my Next.js project. In the index.js file (as per the Next-Auth documentation), I only return a User if there is an active session export default function Home({characters}) { const {data: ses ...

javascriptreactjsnext.jsnext-auth

- "Is it possible to extract values from an optional variable?"

Is there a method to access individual variables from the data returned by the reload method? let reloadProps: ReloadProps | undefined; if (useClientSide() === true) { reloadProps = reload(props.eventId); } const { isTiketAdmin, jwt, user ...

javascriptreactjstypescriptnext.js

I am having difficulty creating grid-template-columns in Vue

When I placed my code in the style scoped section... This is the desired output that I'm aiming for: .user-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 1rem; } .user-car ...

cssvue.jsgridnuxt.js

What is the best way to eliminate the pause in my slideshow?

After spending a few hours working on this project, I've almost completed it. However, I'm facing an issue with the slideshow functionality. It seems to pause after cycling through all the images. Any suggestions on why this might be happening? ...

jquerycss