在jquery ajax表中更改行的字体颜色

Question

我想根据函数内部应用的条件更改行中值的字体颜色。如果TotalStudent大于房间容量，则学生信息将添加到表格中，字体颜色为红色。以下是我尝试过的。我已经使用了ajax方法并且在成功函数中我正在生成表来插入值。条件运行正常。

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

它需要两个修改：

1. 1st只在创建tr时添加类状态。
2. 第二个在每个循环结束时应用css样式，如下所示：

.

//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");
}

我希望它能满足你的要求。

Answer 2

$('.status').css("color", "red");只是改变了已经具有类状态的所有元素的颜色。因此，如果您更改$('.status')...并添加行，则新行将具有红色。实际上，相同的颜色将具有status类的所有元素。

Answer 3

将类放在tr标签中

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

删除它（在生成tr之前使用设置样式）

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

并在css文件中添加类

.status {
  color:red;
}

要么

tr附加到表后设置样式。

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

演示

.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>