Choose a trio of columns using jQuery

Is it possible to target three specific columns using jQuery or CSS, like this:

Take a look at the example code below:

<script> //I am attempting to target specific columns with this code snippet
  $('GvGrid').slice(1, 3).css("backgroundColor", "yellow");
  //$("GvGrid td:nth-child(13):gt(1)").css("backgroundColor", "yellow");
</script>  

<table id="TblCom" runat="server" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <asp:GridView ID="Gv" runat="server" AutoGenerateColumns="False" ClientIDMode="Static" RowStyle-CssClass="GvGrid" CellPadding="1">
        <HeaderStyle CssClass="GvGrid" HorizontalAlign="Center" />
        <Columns>
          <asp:BoundField DataField="MES_ANIO" HeaderText="MONTH"></asp:BoundField>
          <asp:BoundField DataField="PERIOD" HeaderText="PERIOD"></asp:BoundField>
          <asp:HyperLinkField DataNavigateUrlFields="CVE_USUARIO" HeaderText="USER" DataNavigateUrlFormatString="/Sales/RepPersonalAuxiliaryFile.aspx?prospect={0}" DataTextField="USER"> //Target this
            <ControlStyle CssClass="Text" />
            <ControlStyle CssClass="Text" />
          </asp:HyperLinkField>
          <asp:HyperLinkField DataNavigateUrlFields="" DataNavigateUrlFormatString="/Controller/Payroll/CommissionsDetail.aspx?StartDate={0:d}&EndDate={1:d}&UserKey={2}&RoleKey={3}&ProductType=ECO&Status={4}&Total={5}&Paid={6}&LocationKey={7}&QuincenaType={8}" DataTextField="ECO" DataTextFormatString="{0:###}" HeaderText="ECO"> //Target this
          </asp:HyperLinkField>
          <asp:HyperLinkField DataNavigateUrlFields="" DataNavigateUrlFormatString="/Controller/Payroll/CommissionsDetail.aspx?StartDate={0:d}&EndDate={1:d}&UserKey={2}&RoleKey={3}&ProductType=A&Status={4}&Total={5}&Paid={6}&LocationKey={7}&QuincenaType={8}" DataTextField="A" DataTextFormatString="{0:###}" HeaderText="A">
          </asp:HyperLinkField>
          <asp:HyperLinkField DataNavigateUrlFields=""                      DataNavigateUrlFormatString="/Controller/Payroll/CommissionsDetail.aspx?StartDate={0:d}&EndDate={1:d}&UserKey={2}&RoleKey={3}&ProductType=B1&Status={4}&Total={5}&Paid={6}&LocationKey={7}&QuincenaType={8}" DataTextField="B1" DataTextFormatString="{0:###}" HeaderText="B1"> //Target this                                 </asp:HyperLinkField>
        </Columns>
      </asp:GridView>                               
      <br />
    </td>
  </tr>
</table> 

My page Inherits from a master page, and the script above is trying to target specific columns, but the styling is not visible when the page loads. Any feedback would be appreciated. Thank you.

Answer №1

  1. Make sure to use '.GvGrid' instead of 'GvGrid' when selecting a class named 'GvGrid'.
  2. If the jQuery code is running before the DOM is fully loaded, wrap it in $(document).ready(function(){}).

Here is a suggested approach:

<script> //Here, I am attempting to select columns without using functions
    $(document).ready(function () {
        $('.GvGrid').slice(1, 3).css("backgroundColor", "yellow");
            //$("GvGrid td:nth-child(13):gt(1)").css("backgroundColor", "yellow");
    });
</script>

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

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

Does setInterval run only once?

JSFiddle is here... http://jsfiddle.net/Vd8PJ/10/ Currently, I am attempting to create a JQuery carousel that can showcase images of varying widths. The goal is to achieve a seamless and infinite slide to the right on an unordered list containing these i ...

Collect all the attribute values of the checkboxes that have been checked and convert them

Is there a way to retrieve the attribute values of all checked checkboxes as an XML string? <input type="checkbox" id="chkDocId1" myattribute="myval1"/> <input type="checkbox" id="chkDocId2" myattribute="myval43"/> <input type="checkbox ...

Tips for displaying XML content within an AngularJS application using HTML

I have a string containing data: var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel> </rss>" ; My goal is to display this string on a web page in the proper XML format. <channel& ...

Customizing Images using a JSON array of images

Looking to implement a feature that displays images fetched from a CMS via a JSON file. The JSON data structure is as follows: { "images": [ {"title": "Image One", "url": "image1.jpg"}, {"title": "Image Two", "url": "image2.jpg"}, {"title": "Ima ...

Shut down the active tab

For some reason, using window.close(); in my JavaScript script is not closing the currently opened tab as expected. I'm looking for a way to automatically close a manually opened tab using a JavaScript function. Any ideas on what might be going wrong? ...

What is the best way to retrieve the ID of an element using ViewChild in Angular 2 and

How can I establish a relationship between jQuery and ViewChild in Angular 2? I attempted the following code, but it returned an undefined value: @ViewChild('item', {read: ViewContainerRef}) Item; console.log( $(this.Item.nativeElement).attr(& ...

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background ...

Display hyperlinks upon hovering over text

In the sign-up form, there are options for two different types of users: teachers and students. When the sign-up option is selected, a drop-down menu with choices for teacher and student will appear. However, I would like it to function more like other w ...

Modifying data within a pre-set framework

Let's take a look at a basic setup for the task at hand: In the HTML Side test.html <div id="app"> <my-comp temp="1" cat="{ name:'Geoff', age:3 }"></my-comp> </div> Transitioning to the Vue Side app.js: impo ...

How can I find the hexadecimal color value from this jQuery plugin?

Hey everyone, I've been using this awesome jQuery plugin for a color picker. However, I'm curious about where the hex value of the chosen color is stored when the user selects it. I need to process it and save it to the database. Thanks! If you& ...

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...

Struggling with correctly processing values in an HTML PHP Form

Help! I'm struggling with my online PHP form that has checkboxes. When I leave the checkboxes empty and submit the form, the first checkbox option shows up as selected but the second one doesn't (which is correct). Even when I tick both checkboxe ...

Form with a Laravel table

I have a website that includes a form for users to input their language skills. Initially, I organized it as a list: <div class="col-md-3"> <ul class="list-unstyled" id="request_profile_languages"> @isset($requestProfil ...

Tips for repositioning the window when linking to a different section of a website

As a beginner in HTML and CSS, I am currently working on adding a navigation bar to my one-page website. I want the navigation bar to smoothly guide users to different sections of the page when they click on a link. To achieve this, I am using anchors and ...

Processing .dat files using JavaScript

Currently, I am attempting to utilize JavaScript to upload a file named example.dat. Initially, I believed that the correct approach would be using fileReader; however, it appears that this method is unable to process this specific format. The objective i ...

The Jquery Object #<Object> does not have the 'getElement' method available

I've been attempting to set up this table, following the instructions here: Despite verifying that my browser is correctly pulling the CSS and .js files, I keep encountering an error related to my sortabletable.js file. (screenshot of the error) htt ...

Verify whether a specific element within an array of elements is currently in focus

Does anyone have a solution for detecting if any of the dynamically generated 'a' tags within an unknown number of elements currently has focus? if($('#wrapper ul li a:focus')) # there are multiple a tags that are dynamically generated ...

Performing a validation on data fetched using a .load() function

I've been struggling with a persistent issue that I just can't seem to solve. So, here's the situation: I have a blog post on a CMS that I'm developing. The content is saved within a div with its own unique ID. When the user clicks an ...

Responsiveness of a div containing various content

I am currently working with Bootstrap 4 and my HTML code looks like this: <div class="font-weight-bold col-12"> <span>Filter :</span> <input type="text" class="form-control" /> </div> Initial ...