Using Jquery to Implement Alternate Row Colors in a Gridview

I'm experiencing an issue with my grid view where the row colors are not behaving as expected.

https://i.sstatic.net/BzkdH.jpg

When double-clicking on an empty cell in the grid, it should turn green and display "MI". If I double-click on a green cell displaying "MI", it should revert back to its original state with an empty text box and the same background color. However, currently, when clicking on odd row numbers, the color changes to white instead of blue.

This is the code snippet I am working with:

$('#MainContent_GVTest>tbody>tr>td').dblclick(function (e) {

    var selTD = $(e.target).closest("td");
    var selTR = $(e.target).closest("tr");

    if (($.trim($currentCellText) == "MI") && $(selTD).attr('class') == "firsttime") {
        selTD.text("");
        selTD.addClass("NoClass");
    }
}); // This part is functioning as intended

I'm trying to implement logic based on whether the row is even or odd to determine the correct background color. Here's what I've tried so far:

if ($(selTD).is(":even")) {
    alert('Even****************');
    selTD.addClass("NoClass");
}
if ($(selTD).is(":odd")) {
    alert('Odd****************');
    selTD.addClass("NoClassOddrow");
}

.NoClass {
    background-color: white;
}

.NoClassOddrow {
    background-color: blue;
}

After updating the code, I encountered a problem where clicking on the first blue cell alerts "Odd" and turns the cell blue, but clicking on subsequent rows also alerts "Odd" and changes the color to blue again. How can I resolve this issue?

Answer №1

It strikes me as peculiar that there is a class named NoClass in your code. If it were up to me, I would suggest creating a class specifically for highlighting odd and even rows.

You could implement something like this:

#MainContent_GVTest tr:nth-child(even) td.highlight { background-color:green; }

#MainContent_GVTest tr:nth-child(odd) td.highlight { background-color:red; }

This way, you can easily switch between the classes using JavaScript, as shown below:

$('#MainContent_GVTest>tbody>tr>td').dblclick(function (e) {
     $(this).toggleClass('highlight');
});

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

What is the best way to insert a carousel inside a dynamic div that has an image backdrop?

I am facing an issue with placing my carousel within a specified location in a div. I have a responsive div containing an image, and I want the carousel to display at the bottom of the image within the same div. Currently, the carousel appears below the di ...

Scroll down 1 page using Javascript and Jquery

Hey there! I'm looking to create a website where a small scroll on the mouse wheel will take the site to the next anchor. It's kind of hard to explain, but one good example is the Tesla Model 3 website on the US site here. Does anyone have any t ...

Obtain date and currency formatting preferences

How can I retrieve the user's preferences for date and currency formats using JavaScript? ...

Enhancing Dropdown Selections with Jquery and AngularJS

Is there a way to dynamically change the options in this dropdown menu? For example, could I update it to show <li><a data-action="100">100</a> when another button is clicked using ng-click()? <ul class="dropdown-menu pull-right" r ...

Knockout text binding does not automatically update the width

Recently, I encountered a bug in an ongoing project where the user name was appearing within another element until hovered over with a cursor. Upon further investigation, I discovered that this issue stemmed from the project's usage of Knockout.js. I ...

Dynamic double header and footer would be ideal for optimal flexibility

I'm not entirely certain if it's possible, but I am looking for a flexible solution using either flexbox or CSS table layout to create fixed headers and footers like so: ***header one - fixed - dynamic height*** ***header two - fixed - dynamic h ...

Retrieving array values from various fields with identical CLASS using jQuery and utilizing AJAX to transmit the information to PHP

I need to extract values from multiple fields with the same CLASS using JavaScript and then utilize AJAX to send the data to PHP <input type="text" class="form-control subject" placeholder="Subject name"> <input t ...

Using jQuery to create a blinking effect on a specific letter in a string

I'm looking to create a text adventure using Canvas, and I want the parser to blink continuously, similar to the one in a Dos Console. The parser is stored as a global variable. How can I use jQuery to permanently change the character of this global v ...

Are you experiencing empty boxes instead of Glyphicons in Bootstrap 3?

Having some trouble using Glyphicons with Bootstrap 3. I've noticed that a few of them aren't displaying properly. For instance, when trying to use these three glyphicons, the first one doesn't seem to show up correctly (appears as an empty ...

Deleting a row from a table and then adding it back to the end of the table

My goal is to accomplish the following task: remove a row from a table that has the ID #emailTable, then reinsert the same row at the end of the table, and finally hide the reinserted row using JQuery. To remove the table row, I execute the following comm ...

Creating a cell in HTML/CSS with wrapped data

Is there a way to properly wrap data in the table instead of getting a scroll bar when the template name is too long? I would like it to automatically go to the next line. <table class="selectablePreviousOrder dashboard"> <tr ng-class-odd=" ...

When a user enters their ID, I endeavor to generate a personalized visiting card using canvas

I am currently working on a project where I need to generate a personalized visiting card based on input data. The idea is to iterate over an object and retrieve the relevant information upon button click, displaying it on a canvas element. Initially, my p ...

Retrieve information from a button in an HTML file and pass it to an aspx webpage

Here's what I have so far: The Aspx file contains a DataList and SQL DataSource setup that pulls data from the TestDB. <asp:DataList ID="DataList1" runat="server" DataKeyField="AppId" DataSourceID="TestDB" RepeatColumns="1"> <ItemTempla ...

Utilizing PostgreSQL parameters in ASP.NET SQLDataSource for efficient data selection

I am currently working on an asp.net (vb.net) project in Visual Studio that involves a sqldatasource component connecting to a postgres database. Everything is working smoothly, but I have encountered an issue when trying to provide a parameter for my sele ...

Troubleshooting problem with infinite scrolling in AngularJS with Ionic framework

I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom. Below is the HTML code snippet: <ion-content class ...

Seeking a way to encapsulate radio buttons within <span> elements using jquery?

Currently dealing with a SharePoint website where HTML cannot be altered. My challenge is to determine which radio button is selected, but they are enclosed within spans. When I attempt to identify the selected radio button by using the span's title a ...

jQuery scrollTo is functional starting from Chrome version 61

While working on my Angular 2/4 project, I encountered a challenge where I needed to scroll up with every navigation change. This became complicated because I was using sidenav from Angular Material and other components as well. The problem arose when I no ...

Using a checkbox to enlarge a table

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script> <script type='text/javascript'> $(window).load(function () { $('.varx').click(function () { ...

Expanding the jquery accordion as the page loads

Upon loading the page, the jQuery accordion should automatically open. Once the page is fully loaded, the accordion should compact itself. jQuery().ready(function(){ jQuery('#portslid').accordion({ collapsible: true, autoheight: false, alwaysO ...

How to efficiently utilize jQuery's blur function on input fields containing square brackets[] while utilizing the value from this

Here's a little challenge for some of you: I have input fields with names containing brackets. When one of them receives a value, I want to make an ajax call to query the database and retrieve the corresponding part number to populate the first empty ...