jQuery:点击时突出显示/取消突出显示表格行 [英] Jquery: Highlight/De-highlight table row on click

查看:89
本文介绍了jQuery:点击时突出显示/取消突出显示表格行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想我的脚本强调,我选择该行,它的伟大工程,但在选择行/高亮我希望它是取消/dehighlighted"如果选择了另一行.我该怎么做?

I want my script to highlight the row that I select and it works great, but when a row is selected/highlighted i want it to be "deselected/dehighlighted" if another row is selected. How do i do this?

这是用于选择行的当前代码,它会取消选择,但前提是我再次单击同一行:

Here is current code for selecting a row, it deselects, but only if i click on the same row again:

$(".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>

推荐答案

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

You could first deselect all rows, like

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

是的,很抱歉,但是这个想法是正确的;)

edit: yep, sry, but the idea was right ;)

这篇关于jQuery:点击时突出显示/取消突出显示表格行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆