jQuery.addClass not adding a class

Question

Just why is my style not being applied in the jquery below. It aslo only adds the table in FireFox

$("#advisorPerformance").append("<table class='mvc'><tr><th>Advisor</th><th>Packs In</th><th>Pack In (£)</th><th>Packs Out</th><th>Pack Out (£)</th><th>PDQs</th><th>PDQ (£)</th></tr>");
$.each(data.AdvisorPerformances, function(i) {
$("#advisorPerfomance").append("<tr>" +
"<td>" + data.AdvisorPerformances[i].Advisor +
"</td>" +
"<td>" + data.AdvisorPerformances[i].PackInCount +
"</td>" +
"<td>" + data.AdvisorPerformances[i].PacksInValue +
"</td>" +
"<td>" + data.AdvisorPerformances[i].PacksOutCount +
"</td>" +
"<td> " + data.AdvisorPerformances[i].PaymentsInCount +
"</td>" +
"<td>" + data.AdvisorPerformances[i].PaymentsInValue +
"</td>" +
 "</tr>");
 });
$("#advisorPerfomance").append("</table>");

$("#advisorPerfomance").addClass("NOTAPPLIEDSTYLE"); 

Also is there a better way to add a table?

Answer 1

I noticed that some of your code uses "advisorPerfomance", while other code uses "advisorPerformance". I would guess that the JQuery selector to which you are trying to "addClass" results in an array of zero length, so it is adding the class to no elements.

In short, always make sure the selector returns what you thought you were selecting.

Answer 2

You'll want to do something like this using .appendTo() to make it faster and more important, work :)

var tbl = $("<table class='mvc'><tr><th>Advisor</th><th>Packs In</th><th>Pack In (£)</th><th>Packs Out</th><th>Pack Out (£)</th><th>PDQs</th><th>PDQ (£)</th></tr></table>")
$.each(data.AdvisorPerformances, function(i) {
  tbl.append("<tr>" +
  "<td>" + data.AdvisorPerformances[i].Advisor + "</td>" +
  "<td>" + data.AdvisorPerformances[i].PackInCount + "</td>" +
  "<td>" + data.AdvisorPerformances[i].PacksInValue + "</td>" +
  "<td>" + data.AdvisorPerformances[i].PacksOutCount + "</td>" +
  "<td>" + data.AdvisorPerformances[i].PaymentsInCount + "</td>" +
  "<td>" + data.AdvisorPerformances[i].PaymentsInValue + "</td>" +
  "</tr>");
});
tbl.appendTo("#advisorPerformance");
$("#advisorPerfomance").addClass("NOTAPPLIEDSTYLE"); 

a.append() doesn't just append text and make it html, it's creating DOM elements, so your first line is currently creating an unclosed <table>...so from that point on you'll have unpredictable results. Instead either append complete valid elements, or build your table like I have above, then add it to the DOM. The above method creates the table outside the DOM in a document fragment then appends it, this is both faster and a bit cleaner. When complete it adds the entire table to #advisorPerformance.