javascript - 更改表格行选择的背景颜色

Question

我有一堆表格作为 partialViews 使用 ajax 加载。

现在我想写一个全局函数，当有人点击 tablerow 时，background-color 变成橙色，当选择不同的 tablerow 旧的再次变成白色，新的变成橙色。

所以我在 _Layout.cshtml 的底部写了这个:

<script type="text/javascript">
    $(document).ready(function() {
        $("table tbody tr").on('click', function () {
            var selected = $(this).hasClass("selectedTableRow");
            $("table tbody tr").removeClass("selectedTableRow");
            if (!selected)
                $(this).addClass("selectedTableRow");
        });
    });
</script>

但它根本没有被访问，我放置在该函数中的 console.logs 或 alerts 没有被触发。为什么不呢？

顺便说一句，我的 table 都有标准设置

<table>
<thead>
    <tr>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
    </tr>
</tbody>
<tfoot>

</tfoot>
</table>

Answer 1

您正在动态创建表，因此使用带有 .on 的文档绑定(bind)点击事件，见下文

$(document).ready(function() {
        $(document).on('click',"table tr", function () {
            var selected = $(this).hasClass("selectedTableRow");
            $("table tr").removeClass("selectedTableRow");
            if (!selected)
                $(this).addClass("selectedTableRow");
        });
    });