Question

我希望我的脚本突出显示我选择的行并且效果很好，但是当选择/突出显示行时，如果选择了另一行，我希望它“取消选择/取消选择”。我该怎么做？

以下是选择行的当前代码，它取消选择，但仅当我再次点击同一行时才会显示：

$(".candidateNameTD").click(function() {
            $(this).parents("tr").toggleClass("diffColor", this.clicked);
        });

Html表格

<table id="newCandidatesTable">
    <thead>
        <tr>
            <th style="cursor: pointer;">ID</th>
            <th style="cursor: pointer;">Navn</th>
            <th style="cursor: pointer;">Email</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    <% foreach (var candidate in Model.Ansogninger)
    {
         %>
            <tr id="<%= candidate.AnsogerID %>" class="newCandidatesTableTr">
                <td><div id="candidateID"><%= candidate.AnsogerID %></div></td>
                <td><div id="<%= "candidateName_" + candidate.AnsogerID %>" class="candidateNameTD"><%= candidate.Navn %></div></td>
                <td><div id="candidateEmail"><%= candidate.Email %></div></td>
                <td>
                    <div id="<%= "acceptCandidateButton_" + candidate.AnsogerID %>" class="acceptb" style="cursor: pointer; border: 1px solid black; width: 150px; text-align: center;">Godkend</div>
                </td>
            </tr>
         <%
    } %>
    </tbody>
    </table>

Answer 1

您可以先取消选择所有行，例如

    $(".candidateNameTD").click(function() {
        $(this).closest("tr").siblings().removeClass("diffColor");
        $(this).parents("tr").toggleClass("diffColor", this.clicked);
    });

编辑：是的，sry，但这个想法是正确的;）

Answer 2

$(".candidateNameTD").click(function() {
            $("tr").removeClass("diffColor");
            $(this).parents("tr").addClass("diffColor");
        });

Answer 3

这只会影响当前表格：

$(".candidateNameTD").click(function() {
    $('table#newCandidatesTable tr').removeClass("diffColor");
    $(this).parents("tr").addClass("diffColor");
});

Answer 4

最好使用.live。一个事件比许多事件更受欢迎（想想大表，大开销）。

$("div.candidateNameTD").live('click'. function() {
    var $tr = $(this).closest("tr");
    //remove any selected siblings 
    $tr.siblings().removeClass('diffColor');
    //toggle current row
    $tr.toggleClass('diffColor');         
});

Jquery：单击突出显示/取消突出显示表行

4 个答案: