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

Question

嘿，当我 单击连续.

我能做到：

$('#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
  }
});

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

如果它是具有 red 背景的行，那么当用户clicked/selected那一行。

如果它是具有白色背景的行，那么当用户clicked/selected那一行。

现在的问题是如果我去select另一个单元格（白色或红色背景）然后之前点击的行仍然被认为是 selected 行 因此它的 仍然有框阴影 现在 “真实”selected 行也应用了框阴影。

为了让事情变得更复杂（比实际情况更复杂），白色背景和红色背景行共享相同的 tr.k-master-row.k-state-selected css 属性。您可以 select 多行 使用 Shift+click 或 Ctrl+点击表示.

有没有 way/trick 通过 jQuery 我可以 un-select 什么上一个 selected 行并让它只显示当前用户行 selected?

的框阴影

Answer 1

Is there any way/trick via jQuery that I can un-select whatever previous selected row(s)

您已经用通俗易懂的语言描述了解决方案，您只需用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>

To make things more complicated (than they really should be) ... you can select more than one row using the Shift+click or Ctrl+click means.

是的，这让事情变得复杂了。然而，这里有很多关于如何做到这一点的例子 - 这是一个：selecting multiple elements using shift and mouse click - jquery

所以使用这种方法：

如果是普通点击，首先删除所有highlighted行，然后将highlighted class添加到被点击的行（我们已经这部分已经完成);
如果是shift-click，将highlightedclass添加到点击的行，不删除任何当前高亮；
但是如果它已经在 shift-click 上突出显示怎么办？在这种情况下，我们希望从被点击的行中删除突出显示，而不删除任何 other 当前突出显示；

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

$('#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>

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

jQuery table row selected css shared with 2 different background colored rows needing to separate

javascript

css

jquery

html-table