选择表格行并通过Ajax添加行时如何更改其颜色

如何解决选择表格行并通过Ajax添加行时如何更改其颜色

我通过MVC C＃中的Ajax动态添加了表行。现在，我想更改所选行的颜色。 我对在html视图中生成行的表应用了相同的效果。

<div class="col-lg-6 col-sm-12">
   <table id="example" class="table table-striped table-bordered TableforPatientVital" style="width:100%">
      <thead>
         <tr>
            <th>Name</th>
            <th>BP sys.</th>
            <th>BP dia.</th>
            <th>Heart rate</th>
            <th>Respiration</th>
            <th>Sugar</th>
            <th>Body temprature</th>
            <th>Oxygen saturation</th>
            <th>Weight</th>
         </tr>
      </thead>
      <tbody class="load-transactions">
         @foreach (var item in Model)
         {
         <tr id="jsonData">
            <td>
               <a href="javascript:showmychart(@item.PatientId)">  @item.FirstName &nbsp; @item.LastName</a>
            </td>
            <td>@item.BpSystolic</td>
            <td>@item.BpDiastolic</td>
            <td>@item.HeartRate</td>
            <td>@item.Respiration</td>
            <td>@item.Sugar</td>
            <td>@item.Temperature</td>
            <td>@item.OxygenSaturation</td>
            <td>@item.Weight</td>
         </tr>
         }
      </tbody>
   </table>
   <table id="Table2" class="table table-striped table-bordered TableforPatientVital" style="width:100%;">
      <thead>
         <tr>
            <th>Name</th>
            <th>BP sys.</th>
            <th>BP dia.</th>
            <th>Heart rate</th>
            <th>Respiration</th>
            <th>Sugar</th>
            <th>Body temprature</th>
            <th>Oxygen saturation</th>
            <th>Weight</th>
         </tr>
      </thead>
      <tbody id="wrapbody"></tbody>
   </table>
</div>

我的Jquery代码是

function ShowDatainDataTable(value,category) {
    $('#Table2').css("display","block");
    $('#example').css("display","none");
    $('#BP-bar-chart-grouped').css("display","none");
    if (value != null) {
        $.ajax({
            type: "GET",url: "/Dashboard/getDataByVitalsPriority",data: {
                value: value,category: category
            },success: function(response) {
                debugger;
                $('#wrapbody').empty();

                console.log(response);
                //var data = JSON.parse(response);
                if (response) {
                    //$('#example').html(response.data);
                    var len = response.data.length;
                    var name;
                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            name = response.data[i].FirstName + " " + response.data[i].LastName;
                            var html = "<tr class='text-center'>";
                            html += "<td><a style='cursor:pointer;' onclick='showmychart(" + response.data[i].PatientId + ");'>" + name + "</a></td>";
                            html += "<td>" + response.data[i].BpSystolic + "</td>";
                            html += "<td>" + response.data[i].BpDiastolic + "</td>";
                            html += "<td>" + response.data[i].HeartRate + "</td>";
                            html += "<td>" + response.data[i].Respiration + "</td>";
                            html += "<td>" + response.data[i].Sugar + "</td>";
                            html += "<td>" + response.data[i].Temperature + "</td>";
                            html += "<td>" + response.data[i].OxygenSaturation + "</td>";
                            html += "<td>" + response.data[i].Weight + "</td>";
                            html += "</tr>"
                            $('#wrapbody').append(html);
                        }
                    }
                }
            },error: function(result) {
                toastr.error('Service Time Out');
            }
        });
    } else {
        toastr.info("Patient value is not available,please select patient.");
        $("#divPageMessage").html("<div class='alert alert-dismissable alert-info appAlert'><strong><i class='fa fa-info'></i>&nbsp;Please select a patient. </strong></div>");
    }
}

我使用下面的代码来更改单击时的行颜色，这不适用于此表

$(".TableforPatientVital tbody tr").on('click',function(event) {
    $(".TableforPatientVital tbody tr").removeClass('row_selected');
    $(this).addClass('row_selected');
});

请建议我该怎么做？

解决方法

首先，将事件绑定到的祖先应该是“静态” IE，而不是动态创建的。因此，如果还要动态创建表，请使用先前的父级或$(document)。

然后您可以使用$(this)将函数应用于所选行：

$(document).on('click','tr',function () {
  var clickedTR = $(this)  // the tr you clicked on
  alert(clickedTR.attr('id'));
  clickedTR.css('background','red'); // use it as you wish
});