Question

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

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");只需更改已具有类状态的所有元素的颜色。因此，如果您更改$('.status')...并添加行，则新行将显示为红色。实际上，相同的颜色将具有status类的所有元素。

Answer 2

将课程放在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>

Answer 3

需要两个修改：

1st只在创建tr时添加类状态。
第二个在每个循环结束时应用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");
}

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

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

3 个答案: