A jquery class for styling with CSS

I am looking to add a CSS class to a gridview. I attempted to use this style from a reference link, so I implemented the following code snippet:

 $(function () {
     $('[ID*=search_data]').on('click', function () {
         var fromdate = $('[ID*=fromdate]').val();
         var todate = $('[ID*=todate]').val();
         var regiondrop = $('[ID*=regiondrop] option:selected')[0].value;
         var tabledata= $('[ID*=tabledata]');
         var obj = {};
         obj.fromdate = fromdate;
         obj.todate = todate;
         obj.regiondrop = regiondrop;
         Getdataa(obj);
         return false;
     });
 });
   function Getdataa(obj) {
             //alert('1');
             $.ajax({
                 type: "POST",
                 url: "WebForm1.aspx/search_data",
                 data: "{'fromdate':'" + obj.fromdate + "','todate':'" + obj.todate + "','regiondrop':'" + obj.regiondrop + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 async: true,
                 cache: false,
                 success: function (result) {
                     var final = JSON.parse(result.d).response;
                     console.log(JSON.parse(result.d).response)
                     $("#tabledata").empty();
                     if (final.length > 0) {
                         $("#tabledata").append(
                    "<tr ><th>ID</th><th>OwnerName</th></tr>");

                         for (var i = 0; i < final.length; i++) {
                             if (final[i] !== null) {
                                 $("#tabledata").append("<tr><td>" +
                                final[i][0] + "</td> <td>" +
                                final[i][1] + "</td> <td>" +

                             }
                         }
                     }
                     else {
                         $("#tabledata").hide();
                         $("#Label4").text("No Data");
                     }
                 },
                 error: function (error) {
                     alert("error");

                 }
             });
         }

UPDATE

I made changes in jQuery by adding these lines after $("#tabledata").empty();

  $("th").addClass("GridviewScrollHeader");
  $("td").addClass("GridviewScrollItem");

However, after building, there was no visible effect on the grid view.

In the HTML code, the gridview is represented as follows:

 <table id="tabledata">
   </table>

When I apply this code, the gridview displays without any formatting as shown in the image below: https://i.sstatic.net/j0t6N.png

What I want it to look like is demonstrated in this image: https://i.sstatic.net/BGeqt.png So how can I successfully apply the CSS styling to achieve the desired result?

Answer №1

Yes, I have found a solution that works perfectly for me!

$(".table-content tr:first").addClass('HeaderRow');
$(".table-content tr").addClass('DataRow');

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

Adjusting the value of 'this' within a service using a function

I am a newcomer to Angular and currently delving deeper into its intricacies. Despite my efforts in researching, I have not come across a solution for the issue at hand. My service sets the initial value of this.totalCount = 0; Within my controller, upo ...

The readImage function is not processing the file input correctly

I am struggling with a script that I have created to check the width and height of a selected image file. The problem arises when the script is executed, as it fails to run the code within the function readImage (file) { function, which is supposed to ver ...

Excessive API requests can occur when Redux dispatches an action multiple times

Utilizing the Jikan API for anime, my objective is to showcase promo thumbnails of new anime shows. This involves two separate API calls: one to retrieve the latest anime shows: export const get_new_anime = () => `${base_url}search/anime?q&order_b ...

Personalize the color scheme for your timeline paper

I am interested in customizing this specific example of a personalized timeline: import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Timeline from '@material-ui/lab/Timeline'; import Timeli ...

The AJAX response doesn't seem to be halting

My AJAX request looks like this: $.ajax({ url: "AutoRFQ_Vendors_ST.aspx/BindVesselGrid", type: "POST", timeout: 3000, data: JSON.stringify(sendingdata), ...

Do I require a Javascript framework, or can I achieve the desired functionality with the

During my time building Microsoft Excel apps using VBA, I worked with events like _Change and _Click. Transitioning to JavaScript and frameworks was a bit overwhelming due to the asynchronous nature of it all. Moving on to Python and Flask has been a ref ...

What is the best way to convert a graphql query into a JSON object?

I'm facing an issue where I need to convert a GraphQL query into a JSON object. Essentially, I have a query structured like the example below, and I'm seeking a method to obtain a JSON representation of this query. Despite my efforts in searching ...

I need to extract information from the database and save all entries from the form in order to send them to myself. This includes calculating the real-time multiplication of weight and pieces

For a project, I need to gather contact data from the client, and then populate a MySQL database with the information to create new rows in a table. There's an additional requirement where I have to calculate the total weight of element pieces multip ...

Where can you find the invalid character causing a syntax error in the jQuery $.ajax call?

My jQuery code is calling a WCF method, and although the method returns a Boolean true and logs successfully, the error handler displays "AJAX call failed in CallIsDataReady" with a "Syntax Error: Invalid character." This causes the callUpdateGrid function ...

How can I select a checkbox dynamically during runtime?

I am working on a JavaScript code that needs to add the checked option to a checkbox if it has an id or value of 2 at runtime. I have tried the following code, but unfortunately, I am unable to check the checkbox. Do you have any ideas on how to solve th ...

Is it possible to use multiple schemas for one collection name?

I am currently working on creating different schemas for a single collection, such as User or subUser. I aim to store both User and subuser data in the same collection but with different schemas. Here is an example of my schema file: export const AryaSchem ...

Ensuring each field is filled correctly in a step-by-step registration form

I have been working on implementing a step-by-step registration form, and I am facing an issue. When I click on the next button, all fields should be mandatory to proceed to the next step. It's crucial for the user experience that they fill out all th ...

Rules for validating string and numeric combinations in Vuetify are essential for ensuring accurate

Looking for guidance on implementing Vuetify validation to enforce rules (using :rules tag on a v-text-field) in the format of AB-12345678 (starting with two letters followed by a hyphen and then an 8-digit number). I'm having difficulty achieving thi ...

Tips for controlling the upload of a .exe.png file or converting a .exe file to a png file for uploading in angular 8

I had originally set up restrictions to only allow image file types such as JPG, JPEG, PNG, and TIFF. However, I discovered that users were able to upload .exe files simply by renaming them. For example, changing dell.exe.png or dell.exe to dell.png allo ...

A guide to playing a series of audio files in succession using the Ionic Media plugin

I have been attempting to create a playlist of multiple audio files using the Ionic media plugin from here. However, I am struggling to achieve this without resorting to using a timeout function. Here is my current approach: playOne(track: AudioFile): Pr ...

Receiving a JSON object in response after sending data to a server using JavaScript

I am facing an issue with passing an email and password on login click to a database using PHP. After testing the email and password combination, PHP sends back a JSON object. While I have verified that the PHP code is functioning correctly and returns a J ...

Seamless scrolling experience achieved after implementing a header that appears when scrolling up

My goal is to create a header with the following functionalities: Initially displays with a transparent background Upon scrolling down the page by 25px, it will dynamically add the header--maroon class to the header, which alters the background color and ...

Is your CSS file functioning properly in Chrome but not in Internet Explorer?

I recently developed a custom SAP Portal Component that includes a JSP file with Javascript. This component is placed on a SAP Portal page alongside another iView, which contains multiple headers and text within an iframe. My objective is to dynamically ge ...

What is the timing for running tests using Yeoman AngularJS framework?

Recently, I created a compact Yeoman AngularJS project. Whenever I enter the command grunt serve, the application is launched and displayed in the browser. Surprisingly, whenever I make adjustments to a test, Grunt automatically reruns the test and provide ...

Building conditionals in AngularJS expressions using if-then-else syntax

Is there a way to incorporate the ternary-operator (if-then-else construction) in an angularjs expression? For example, I have a function $scope.isExists(item) that should return a boolean value. I would like to do something like this: <div ng-repeater ...