Tengo una tabla en una página de afeitar en la que recorro una colección IENumenrable (vwAssignedTaskProgress) y agrego filas según las condiciones. Uno o más de los contiene 'reciente' para indicar que es una fila que se agregó recientemente. Quiero resaltar brevemente estas filas para indicar que son filas nuevas.
Mi problema es doble. Estoy usando jquery (aunque estoy contento con cualquier solución) y no puedo hacer que el selector de jquery se active en las filas generadas dentro de mi ciclo. Funciona bien en el contenido fuera de mi bloque de código @. Y en segundo lugar, parece que no puedo hacer que .effect funcione en Jquery (intentando fuera del bloque @). La investigación me dice que es parte de la interfaz de usuario de jquery que está incorporada en jquery y obsoleta. Usar jquery 3.5.1
<table class="table text-center" id="tblTasks4">
<tbody>
@foreach (var tsk in Model.vwAssignedTaskProgress){
@if ((@tsk._ChildUserId == @student.ChildUserId) && (@tsk.stStatus < 2))
{
<tr >
<th scope="row">
@tsk.Description
</th>
@if(@tsk.Created > DateTime.Now.AddMinutes(-1))
{
<td >
recent
</td>
}
</tr>
}
}
</tbody>
</table>
bloque de script, dentro de un formulario y una etiqueta de cuerpo.
<script>
$('#tblTasks4 td').filter(
function(t){
if($(this).text() =="recent") {
$(this).closest('tr').effect("highlight", {}, 3000);
return;
}
});
</script>
En primer lugar, jQuery UI no está incluido en jQuery. Tienes que agregarlo a tu proyecto por separado.
Luego agregaría una clase recent a los td recientes y los resaltaría usando:
$('.recent').parent().effect("highlight", {}, 3000);
Ejemplo:
<table class="table text-center" id="tblTasks4">
<tbody>
@foreach (var tsk in Model.vwAssignedTaskProgress)
{
@if ((@tsk._ChildUserId == @student.ChildUserId) && (@tsk.stStatus < 2))
{
<tr>
<th scope="row">
@tsk.Description
</th>
@if (@tsk.Created > DateTime.Now.AddMinutes(-1))
{
<td class="recent">
recent
</td>
}
</tr>
}
}
</tbody>
</table>
@section Scripts {
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
<script>
$('.recent').parent().effect("highlight", {}, 3000);
</script>
}