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

Attempting to assign a specific font style to a dropdown selection menu

Trying to assign a font-family to the options in my select menu but facing issues. The code below seems to work on Google Chrome, but I'm getting a different font-family on Internet Explorer. Any suggestions on how to set a font-family that works on ...

htmlcss

Include images in the form of .png files within the td elements of a table that is dynamically generated in the index

I have successfully created a table using embedded JavaScript with the help of messerbill. Here is the code: <table id="Table1"> <tr> <th>Kickoff</th> <th>Status</th> <th>Country</th> < ...

javascripthtmlnode.jsejs

What are the potential drawbacks of combining the useState hook with Context API in React.js?

Within my code, I establish a context and a provider in the following manner. Utilizing useState() within the provider enables me to manage state while also implementing functions passed as an object to easily destructure elements needed in child component ...

javascriptreactjsreact-reduxstate-management

I am trying to retrieve the class name of each iframe from within the iframe itself, as each iframe has a unique class name

My index HTML file contains multiple Iframes. I am trying to retrieve the class names of all iframes from inside an iframe. Each iframe has a different class name. If any of the iframes have a class name of 'xyz', I need to trigger a function. I ...

javascriptjqueryhtmliframe

What is the best way to restrict users from accessing more than 5 Bootstrap Tab-Panes at once?

Users are restricted to opening only a maximum of 5 tab panes, even if there are multiple tab buttons available. If the user tries to click on the 6th tab, an alert message will be displayed. function addTab(title, url){ var tabs=$(".tabs"), tab ...

javascriptphpjquerycssbootstrap-4

Verify the user's activity status in the MySQL database using Node.js by checking the timestamp of their last login

I have a query regarding user activity and deletion from the database. I need to determine when a user last logged in to see if their account is inactive. Unfortunately, I am unsure of how to tackle this task or check for the last login time. If anyone c ...

javascriptmysqlnode.jsexpress

Exploring parameterized routing in Node.js and Express

I am currently facing an issue with my node.js API where I have two separate routes set up. One route is for retrieving user data by ID, while the other is a general user endpoint. Here are the routes: app.get('/api/v1/user/:userid', function (r ...

javascriptnode.jsapiexpressroutes

Finding unique data stored in separate JSON files and loading them individually may require using different methods for

I have two JSON files named marker.json and marker.json0 that contain different latitude and longitude coordinates. To load them, I need to rename .json0 to .json (and vice versa), so that the new data from marker.json0 now resides in marker.json. This way ...

javascripthtmljsoncssgoogle-maps-api-3

The $postLink() method in the controller is encountering a null value for this.$scope

class pageController { constructor($scope, MyEditableGrid) { this.$scope = $scope; this.MyEditableGrid = MyEditableGrid; this.myEditableGrid = { appScope: this.$scope, ..... } } $postLink ...

javascriptangularjs

Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code-success{ flex: 0 0 10% !impo ...

cssangularangular-materialmaterial-design

Is it possible to utilize a map in Python or incorporate other advanced functions to efficiently manage indices?

When working with higher order functions in JavaScript, we have the ability to access the element, index, and iterable that the function is being performed on. An example of this would be: [10,20,30].map(function(element, index, array) { return elem + 2 ...

javascriptpythonlambdahigher-order-functions

What is the reason for omitting the FromBody modifier for additional parameters in a method signature

Exploring the nuances of jQuery when calling an mvc controller via ajax post. It's interesting that although it works as intended, there seems to be a discrepancy in the necessity of using the [FromBody] modifier for the 2nd parameter. The variables ...

jqueryasp.net-mvc

A guide on enhancing Autocomplete Tag-it plugin with custom tags

Looking to expand the tags in the 'sampleTags' variable within this code snippet $(function () { var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', &apo ...

javascriptjqueryajaxjsontag-it

Is your AngularJS code throwing an error?

$scope.logout = function () { //var auth_token = $cookieStore.get('auth_token'); Auth.delete({ 'auth_token': $cookieStore.get('auth_token') }, function(data){ $scope.isLoggedIn = false; $cookieSto ...

javascriptangularjs

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

javascripthtmlvue.js

Adjust the color of both the image and text when hovering over either one

I need help creating a hover effect for an image and text pair. My goal is to have the image change when hovered over, along with changing the color of the text next to it. Below is the code I am currently working with: <ul id="recherche"> < ...

htmlcsshover

What is causing the error to appear in the Android web-view when using vue.js?

During the development of my web app using Vue.js, I encountered a strange issue where everything was functioning correctly in desktop browsers but not on mobile devices. To troubleshoot this problem, I decided to install an Android emulator and use remote ...

javascriptandroidvue.js

Exploring the process of cycling through "Fetch" JSON data in React.js for a dynamic slider component after setting it to state

Still getting the hang of React, so please go easy on me! My main objective is to retrieve data from my personal JSON server and display it on a custom "Slider" component that I'm working on. Following a tutorial, I wanted to challenge myself by usi ...

javascriptreactjsjson

How can I effectively refresh the provider_token / access token for Discord in NextJS with Supabase Auth?

Currently, I have encountered an issue with my NextJs project using Supabase Auth for authentication. I am currently utilizing the Discord provider and everything works fine initially. However, after a few minutes, the session object gets updated and the p ...

javascriptsessionnext.jsoauth-2.0supabase

The code for styling the borders of links is not functioning as expected

I'm currently in the process of creating a buttoned-link feature. The aim is to incorporate a border around the link with an outset style, while having the border-style change to inset when the link is active using a:active and border-style: inset. A ...

htmlcss