Apply css class on tr and th jquery

help
1

I try to apply class on tr and th i try this but effect did not reflect when i run this

html

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

and

success: function (result) { var final = JSON.parse(result.d).response; console.log(JSON.parse(result.d).response) $("#tabledata").empty(); $("th").addClass("GridviewScrollHeader"); $("td").addClass("GridviewScrollItem"); if (final.length > 0) { $("#tabledata").append( "<tr><th>ID</th><th>OwnerName</th><th>RegNo</th><th>MileageAccumlation</th><th>MaxSpeed</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>" + final[i][2] + "</td> <td>" + final[i][3] + "</td> <td>" + final[i][4] + "</td></tr>"); } } }

any solution?>

2

Don’t use jQuery for this.

Seriously.

That’s not how to create a dynamically populated table with Meteor.

Check out the Blaze tutorial for some guidance on app development in Meteor.

1 Like
3

i use jquery because i have static webmethod and in that i unable to call gridview1 thats why i use…

4

But your static webMethod can still be used with Meteor in the normal Meteor way.

I’d be happy to provide some sample code to show how this is done.

5

yes of course this is how i use webmethod code
`

  [WebMethod]
    public static string search_data(DateTime fromdate, DateTime todate, string regiondrop)
    { 
        try
        {
            string result = "";
            TrackDataEntities1 ts = new TrackDataEntities1();
           
            var dq = (from vv in ts.tblVeh
                      join rv in ts.tblRvi on vv.ID equals rv.ID
                      join re in ts.tblRegi on rv.RID equals re.RID
                      where
                      re.Region == regiondrop
                      && re.StartDate <= fromdate
                      && re.EndDate >= todate
                      orderby
                      vv.ID,
                      rv.OwnerName
                      select new
                      {
                          ID = vv.ID,
                          ownername = rv.OwnerName,
                          RegNo = rv.RegNo,
                          MileageAccumlation = rv.MileageAccumlation,
                          MaxSpeed = rv.MaxSpeed,
                      }).ToList();
            DataTable dt = new DataTable();
         
           dt.Columns.Add("ID", typeof(int));
           dt.Columns.Add("OwnerName", typeof(string));
           dt.Columns.Add("RegNo", typeof(string));
           dt.Columns.Add("MileageAccumlation", typeof(string));
           dt.Columns.Add("MaxSpeed", typeof(string));
          
           foreach (var c in dq)
           {
               dt.Rows.Add(c.ID, c.ownername, c.RegNo, c.MileageAccumlation, c.MaxSpeed);
           }

           result = DataSetToJSON(dt);
         
           return result;
        }
        catch (Exception)
        {
            throw new Exception();


        }

    }`

public static string DataSetToJSON(DataTable dt)
{
Dictionary<string, object> dict = new Dictionary<string, object>();
object[] arr = new object[dt.Rows.Count + 1];
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
arr[i] = dt.Rows[i].ItemArray;
}
dict.Add(“response”, arr);
JavaScriptSerializer json = new JavaScriptSerializer();
return json.Serialize(dict);
}

6

@robfallows please check code

7

@robfallows through this code table is successfully dispplay but when i use asp gridview instead of table then grid view not display

8

I’m not saying you can’t make it work. All I’m saying is that you don’t need all that jQuery spaghetti when you use Meteor. Your WebMethod is just an HTTP endpoint which you consume with Meteor. That means you can use declarative coding techniques which makes for code which is more understandable and maintainable.

If you really want to persist with jQuery and all you want to do is add the given classes to your existing code, then I see two possibilites.

Declare the class when you add the appropriate item, e.g.:

final[i][1] + `</td> <td class="GridviewScrollItem">` +

or use the addClass methods after creating your entire table:

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><th>RegNo</th><th>MileageAccumlation</th><th>MaxSpeed</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>" +
final[i][2] + "</td> <td>" +
final[i][3] + "</td> <td>" +
final[i][4] + "</td></tr>");
}
}
$("th").addClass("GridviewScrollHeader");
$("td").addClass("GridviewScrollItem");
}
1 Like
9

@robfallows i already both of your techniques but still gridview not display with css class

10

So how are you loading your grid view plugin?

11

@robfallows i mean gridview is load and display on page but not with style… and i am done with this your answer but still simple gridview is 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><th>ID</th><th>OwnerName</th><th>RegNo</th><th>MileageAccumlation</th><th>MaxSpeed</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>" +
                                final[i][2] + "</td> <td>" +
                                final[i][3] + "</td> <td>" +
                                final[i][4] + "</td></tr>");
                          
                       }
                   }
                  $("th").addClass("GridviewScrollHeader");
                  $("td").addClass("GridviewScrollItem");
               }`