CSS class in jquery [Answered]RSS

• • Reply
  Capricon Use...

  Member

  239 Points

  1074 Posts

  CSS class in jquery

  Jul 18, 2016 10:02 AM|Capricon User|LINK

  I want to apply a CSS class to a gridview. I tried to apply this style reference link, so I try this

  $(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

  ok i update these lines in jquyer after 

  $("#tabledata").empty();

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

  but when i build then there is no effect in grid view

  And gridview in html

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

  When i apply this then gridview is display with simple where as i want to apply this css in gridview when i apply this then gridview display without formatting.. what i try

  

  what i want 

  

  So how i apply css ?? any solution?

• • Reply
  arun banik

  Member

  81 Points

  44 Posts

  Re: CSS class in jquery

  Jul 18, 2016 12:38 PM|arun banik|LINK

  you may try something like this. For example...

  $('#tabledata').focus(function() {
          $(this).closest('tr').addClass('highlight_row');
      });

• • Reply
  Capricon Use...

  Member

  239 Points

  1074 Posts

  Re: CSS class in jquery

  Jul 19, 2016 04:57 AM|Capricon User|LINK

  arun banik

  you may try something like this. For example...

  $('#tabledata').focus(function() {
          $(this).closest('tr').addClass('highlight_row');
      });

  thank for reply when i try this after  if (final[i] !== null) {

  css not effect on gridview

• • Reply
  Fei Han - MS...

  All-Star

  40075 Points

  6072 Posts

  Microsoft

  Re: CSS class in jquery

  Jul 19, 2016 05:32 AM|Fei Han - MSFT|LINK

  Hi Bakhtawar Ashiq,

  Bakhtawar Ashiq

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

  Firstly, the code snippet is not correct, please modify the code to this.

  $("#tabledata").append("<tr><td>" +
                  final[i][0] + "</td> <td>" +
                  final[i][1] + "</td> <tr>");
  

  Secondly, as you do, the .addClass() method could be used to add the specified class(es) to matched elements, you could use F12 developer tools to select table cells and check the actual CSS styles applied to the cells. Besides, it seems that you’d like to specify CSS styles for table cells, you could try to implement it via CSS.

  th {
      /*yourcode*/
      background-color: red;
  }
  
  td {
      /*yourcode*/
      background-color: yellow;
  }  
  

  Best Regards,

  Fei Han

  
  MSDN Community Support
  Please remember to "Mark as Answer" the responses that resolved your issue.
  
• • Reply
  Capricon Use...

  Member

  239 Points

  1074 Posts

  Re: CSS class in jquery

  Jul 19, 2016 06:08 AM|Capricon User|LINK

  Fei Han - MSFT

  Hi Bakhtawar Ashiq,

  Frstly, the code snippet is not correct, please modify the code to this.

  $("#tabledata").append("<tr><td>" +
                  final[i][0] + "</td> <td>" +
                  final[i][1] + "</td> <tr>");
  

  Secondly, as you do, the .addClass() method could be used to add the specified class(es) to matched elements, you could use F12 developer tools to select table cells and check the actual CSS styles applied to the cells. Besides, it seems that you’d like to specify CSS styles for table cells, you could try to implement it via CSS.

  th {
      /*yourcode*/
      background-color: red;
  }
  
  td {
      /*yourcode*/
      background-color: yellow;
  }  
  

  Best Regards,

  Fei Han

  thnak for reply

  You mean i remove this if (final[i] !== null) {     ???

  and in this 

  th {
      /*yourcode*/
      background-color: red;
  }

  and in this 

   /*yourcode*/ 

  which code i use this

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

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

  or something else?

• • Reply
  Capricon Use...

  Member

  239 Points

  1074 Posts

  Re: CSS class in jquery

  Jul 19, 2016 08:34 AM|Capricon User|LINK

  any solutions please?

• • Reply
  bugwee

  Member

  270 Points

  79 Posts

  Re: CSS class in jquery

  Jul 20, 2016 10:31 AM|bugwee|LINK

  to make it simple you can add the class during creation or records to display.

  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 class='GridviewScrollHeader' ><th>ID</th><th>OwnerName</th></tr>");
  
            for (var i = 0; i < final.length; i++) {
                if (final[i] !== null) {
                    $("#tabledata").append("<tr class='GridviewScrollItem'><td>" +
                   final[i][0] + "</td> <td>" +
                   final[i][1] + "</td> </tr>");
  
                }
            }
        }
        else {
            $("#tabledata").hide();
            $("#Label4").text("No Data");
        }
   }

  Mark as Answer the posts that helped you.
• • Reply
  Capricon Use...

  Member

  239 Points

  1074 Posts

  Re: CSS class in jquery

  Jul 20, 2016 12:17 PM|Capricon User|LINK

  bugwee

  to make it simple you can add the class during creation or records to display.

  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 class='GridviewScrollHeader' ><th>ID</th><th>OwnerName</th></tr>");
  
            for (var i = 0; i < final.length; i++) {
                if (final[i] !== null) {
                    $("#tabledata").append("<tr class='GridviewScrollItem'><td>" +
                   final[i][0] + "</td> <td>" +
                   final[i][1] + "</td> </tr>");
  
                }
            }
        }
        else {
            $("#tabledata").hide();
            $("#Label4").text("No Data");
        }
   }

  i try this but not work so i tried this one and this work for me anyways thanku 

  $("#tabledata tr:first").addClass('GridviewScrollHeader');
  $("#tabledata tr").addClass('GridviewScrollItem');

• • Reply
  Fei Han - MS...

  All-Star

  40075 Points

  6072 Posts

  Microsoft

  Re: CSS class in jquery

  Jul 22, 2016 07:12 AM|Fei Han - MSFT|LINK

  Hi Bakhtawar Ashiq,

  Bakhtawar Ashiq

  You mean i remove this if (final[i] !== null) {     ???

  You misunderstand my meaning, you generate table row (tr) and append to table using

  $("#tabledata").append("<tr><td>" + final[i][0] + "</td> <td>" + final[i][1] + "</td> <td>" +

  do you find the error with the above code snippet? and <tr> will be missing its closing tag </tr>.

  Besides, it seems that you are not familiar with using jQuery to find the elements and perform the elements. In a word, we need to make sure that we find the element we want before we do operations with the element.

  And F12 developer tools is a good tool for developer to find and fix html and javascript issues, you could spend some time to learn using F12 developer tools.

  Best Regards,

  Fei Han

  
  MSDN Community Support
  Please remember to "Mark as Answer" the responses that resolved your issue.