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

Posted 2023-04-13

【中文标题】选择表格行并通过ajax添加行时如何更改表格行的颜色

【英文标题】：How to change color of table row when it is selected and row added through ajax

【发布时间】：2020-12-17 02:35:22

【问题描述】：

我在 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');
);

请建议我该怎么做？

【问题讨论】：

在将行添加到 tbody 后，能否提供给我们 html？

是的，确实，实际上我在其中放置了 2 个表的 div。

tutorialrepublic.com/faq/… 您需要将 onclick 事件绑定到您的动态创建的元素

谢谢。它正在工作，但在所有选定的行上，我希望一次只选择一行，因此前一行的颜色应该是正常的。

【参考方案1】：

首先，您将事件绑定到的祖先应该是“静态”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
);