问题描述
我通过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 @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> 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
});