更改jQuery Ajax表中一行的字体颜色

Question

I want to change the font color of values in a row based on the condition that applied inside the function. If the TotalStudent is greater than room capacity, the student information gets added to the table with the font color of red. Below is what I've tried. I've used ajax method and within success function I'm generating table to insert values. The condition is running fine.

Create.cshtml

$.ajax({
  type: "POST",
  url: '@Url.Action("AddStudent", "Student")',
  data: model,
  dataType: "json",
  success: function(data) {
    $('#dialog').dialog('close');
    alert(data.countstudent);
    alert(data.roomcapacity);
    //var student = data.countstudent;
    if (data.countstudent > data.roomcapacity) {
      var tblEndrolled = $("#tblEnrolled");
      $.each(data.record, function(index, item) {
        $('.status').css("color", "red");
        var tr = $("<tr></tr>");
        tr.html(("<td>" + '<input type="submit" id="' + item.Id + '" value="Remove" class="" />' + "</td>") +
                " " + ("<td class = 'status'>" + item.FirstName + "</td>") +
                " " + ("<td>" + item.LastName + "</td>") +
                " " + ("<td>" + item.EmailAddress + "</td>") +
                " " + ("<td>" + item.Phone + "</td>"));
        tblEndrolled.append(tr);
      });
    }

    <div>
      <strong style = "font-size:20px" > Enrolled Students: < /strong> 
        <table class = "table table-bordered table-responsive table-hover" id="tblEnrolled">
        <tr>
        <th>Action</th>
                @*<th>User Id</th>
                *@<th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Phone</th>
        </tr>
        </table> 
        </div>

Answer 1

$('.status').css("color", "red"); just change color on all elements which already had class status. So, if your change $('.status')... and row additional your new row will have red color. Indeed same colors will have all elements with status class.

Answer 2

Put the class in tr tag

 var tr = $("<tr class = 'status'>></tr>");

Remove this ( use are setting style before you are generation the tr )

$('.status').css("color", "red");

And add class in css file

.status {
  color:red;
}

OR

set style after tr is appended to table.

tblEndrolled.append(tr);
$('.status').css("color", "red");

Demo

 .status { color:red; } 

 <table class = "table table-bordered table-responsive table-hover" id="tblEnrolled"> <tr> <th>Action</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Phone</th> </tr> <tr class="status"> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </table> 

Answer 3

It needs two modication :

1. 1st just add class status at the creation of tr.
2. 2nd apply css style at the end of each loop, like below:

.

//var student = data.countstudent;
if (data.countstudent > data.roomcapacity) {
    var tblEndrolled = $("#tblEnrolled");
    $.each(data.record, function(index, item) {
    var tr = $("<tr class = 'status'></tr>");
        tr.html(("<td>" + '<input type="submit" id="' + item.Id + '" value="Remove" class="" />' + "</td>") +
                " " + ("<td >" + item.FirstName + "</td>") +
                " " + ("<td>" + item.LastName + "</td>") +
                " " + ("<td>" + item.EmailAddress + "</td>") +
                " " + ("<td>" + item.Phone + "</td>"));
        tblEndrolled.append(tr);
    });
    $('.status').css("color", "red");
}

I hope it will fulfill your requirement.