Razor页面中如何高亮动态生成的含指定TD值的表格行

问题1：jQuery选择器无法匹配Razor生成的行 #

原因是脚本在DOM未完全加载时就执行了，此时Razor动态生成的行还没渲染到页面中。

解决方法：

• 将脚本包裹在$(document).ready()中，确保DOM加载完成后再执行；或者把脚本放在页面底部（</body>标签前）。

问题2：.effect()方法失效 #

.effect()是jQuery UI的专属方法，jQuery核心库不包含这个功能。推荐用CSS动画替代，无需额外引入库，更轻量：

完整修改代码： #

1. 添加CSS高亮动画

在页面的<style>标签中添加：

@keyframes highlight {
    0% { background-color: #ffffcc; }
    100% { background-color: transparent; }
}

.recent-row {
    animation: highlight 3s ease-out;
}

2. 优化Razor表格代码

直接给新增行添加recent-row类，避免通过文本筛选，更高效：

<table class="table text-center" id="tblTasks4">
    <tbody>
        @foreach (var tsk in Model.vwAssignedTaskProgress)
        {
            if (tsk._ChildUserId == student.ChildUserId && tsk.stStatus < 2)
            {
                <tr @(tsk.Created > DateTime.Now.AddMinutes(-1) ? "class='recent-row'" : "")>
                    <th scope="row">
                        @tsk.Description
                    </th>
                    
                    @if(tsk.Created > DateTime.Now.AddMinutes(-1))
                    {
                        <td>
                            recent
                        </td>
                    }
                </tr>
            }
        }
    </tbody>
</table>

3. （可选）如果坚持用jQuery UI

如果一定要用.effect()方法，需要引入jQuery UI库（注意版本要和jQuery 3.5.1兼容），然后调整脚本：

<!-- 先引入jQuery，再引入jQuery UI -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script>
$(document).ready(function() {
    $('#tblTasks4 td:contains("recent")').closest('tr').effect("highlight", {}, 3000);
});
</script>

关键说明 #

• 用CSS动画的方案更简洁，不需要额外依赖，性能更好；
• Razor代码中直接通过条件判断添加类，比后续用jQuery筛选更高效，避免DOM遍历开销；
• 确保脚本执行时机在DOM加载完成后，否则无法找到动态生成的元素。

内容的提问来源于stack exchange，提问作者PipecockJackson