jQuery 表格行选择的 css 与需要分隔的 2 个不同背景颜色的行共享

Question

嘿，当我单击一行时，我一直在试图弄清楚如何更改所选属性box-shadow。

我可以这样做：

$('#grdSocialMediaFeeds').on('click', 'tr', function () {
  if ($(this)[0].style.backgroundColor == "") {
     //the rows background is white
     console.log("white");
     $(this).css('box-shadow',"inset 0 0 2px 2px #a7957f"); //Greyish color
  } else {
     //the rows background is red.
     console.log("red");
     $(this).css('box-shadow',"inset 0 0 2px 2px #a92525"); //Dark red-ish color
  }
});

将正确的颜色框阴影放在我单击的行周围，效果很好。

如果它是具有红色背景的行，那么当用户单击/选择该行时，我会在其周围放置较暗的红色框阴影。

如果它是具有白色背景的行，那么当用户单击/选择该行时，我会在其周围放置一个灰色框阴影排。

现在问题是，如果我去选择另一个单元格（白色或红色背景），那么之前单击的行仍然是视为仍被选中行，因此它的仍然具有框阴影，现在“真实”选定的行也应用了框阴影。

为了让事情变得更复杂（比实际应该的更复杂），白色背景行和红色背景行分享相同的tr.k-master-row.k-state-selected CSS 属性。您可以使用 Shift+单击 或 Ctrl+单击选择多行 kbd> 意味着。

有没有通过jQuery的任何方法/技巧，我可以取消选择任何以前选择的行并让它只显示框- 当前用户行的阴影被选中？

Answer 1

有什么方法/技巧可以通过 jQuery 取消选择之前选择的行

您已经用简单的语言描述了解决方案，您只需要在 JS 中实现它即可！ :-) 这是一个工作片段：

$('#grdSocialMediaFeeds').on('click', 'tr', function () {

    // First remove highlight from all rows
    $('#grdSocialMediaFeeds tr').css('box-shadow', 'none');

    // Now add the highlight to the clicked row
    if ($(this)[0].style.backgroundColor == "") {
        $(this).css('box-shadow',"inset 0 0 2px 2px #a7957f");
    } else {
        console.log("red");
        $(this).css('box-shadow',"inset 0 0 2px 2px #a92525");
    }
});

table {
    width: 100%;
    border: 1px solid #eee;
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    padding: 8px;
    border: 1px solid #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="grdSocialMediaFeeds">
    <tr>
        <td>Date</td>
        <td>Something</td>
        <td>AnotherThing</td>
    </tr>
    <tr style="background-color: #f1c0e8;">
        <td>01/03/2022</td>
        <td>Public</td>
        <td>admin</td>
    </tr>
    <tr>
        <td>01/03/2022</td>
        <td>admin</td>
        <td>admin</td>
    </tr>
    <tr>
        <td>01/03/2022</td>
        <td>Public</td>
        <td>Public</td>
    </tr>
</table>

你确实应该使用 CSS，而不是内联样式，而且这样做会更简单，下面是如何做到这一点的示例：

$('#grdSocialMediaFeeds').on('click', 'tr', function () {

    // First remove highlight from all rows
    $('#grdSocialMediaFeeds tr').removeClass('highlighted');

    // Now add the highlight to the clicked row
    $(this).addClass('highlighted');
});

table {
    width: 100%;
    border: 1px solid #aaa;
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    padding: 8px;
    border: 1px solid #aaa;
}

.white {
    background-color: #eee;
}

.pink {
    background-color: #f1c0e8;
}

.white.highlighted {
    box-shadow: inset 0 0 2px 2px #a7957f;
}
.pink.highlighted {
    box-shadow: inset 0 0 2px 2px #a92525;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="grdSocialMediaFeeds">
    <tr>
        <td>Date</td>
        <td>Something</td>
        <td>AnotherThing</td>
    </tr>
    <tr class="pink">
        <td>01/03/2022</td>
        <td>Public</td>
        <td>admin</td>
    </tr>
    <tr class="white">
        <td>01/03/2022</td>
        <td>admin</td>
        <td>admin</td>
    </tr>
    <tr class="white">
        <td>01/03/2022</td>
        <td>Public</td>
        <td>Public</td>
    </tr>
</table>

为了让事情变得更复杂（比实际应该的更复杂）...您可以使用 Shift+单击或 Ctrl+单击方式选择多行。

是的，这让事情变得复杂了。然而，这里有很多关于如何做到这一点的示例 - 这是一个： 使用shift和鼠标单击选择多个元素 - jquery

因此使用这种方法：

• 如果是普通单击，首先删除所有突出显示的行，然后添加这highlighted 类到单击的行（我们已经完成了这部分）；

• 如果是按住 Shift 键单击，则将 highlighted 类添加到单击的行，而不删除任何当前突出显示；

• 但是如果按住 Shift 键并单击时它已突出显示怎么办？在这种情况下，我们希望从单击的行中删除突出显示，而不删除任何其他当前突出显示；

这是一个工作片段，证明了这一点：

$('#grdSocialMediaFeeds').on('click', 'tr', function (e) {

    if (! e.shiftKey) {
        // If it was a plain click (ie NOT a shift-click), remove all
        // highlights, and highlight this row
        $('#grdSocialMediaFeeds tr').removeClass('highlighted');
        $(this).addClass('highlighted');
        
    } else {
        // If it was a shift-click, and the row was already hightlighted,
        // we want to unhighlight it.  If it was not already highlighted,
        // we want to highlight it.  So simply toggling that class:
        $(this).toggleClass('highlighted');
    }
});

table {
    width: 100%;
    border: 1px solid #aaa;
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    padding: 8px;
    border: 1px solid #aaa;
}

.white {
    background-color: #eee;
}

.pink {
    background-color: #f1c0e8;
}

.white.highlighted {
    box-shadow: inset 0 0 2px 2px #a7957f;
}
.pink.highlighted {
    box-shadow: inset 0 0 2px 2px #a92525;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="grdSocialMediaFeeds">
    <tr>
        <td>Date</td>
        <td>Something</td>
        <td>AnotherThing</td>
    </tr>
    <tr class="pink">
        <td>01/03/2022</td>
        <td>Public</td>
        <td>admin</td>
    </tr>
    <tr class="white">
        <td>01/03/2022</td>
        <td>admin</td>
        <td>admin</td>
    </tr>
    <tr class="white">
        <td>01/03/2022</td>
        <td>Public</td>
        <td>Public</td>
    </tr>
</table>