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

Hey all I am stuck trying to figure out how to change the selected property box-shadow when I click on a row.

I could do this:

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

And that does work fine putting the correct color box-shadow around the row I clicked on.

If it was a row that has a red background then I would put a darker red box-shadow around it when the user clicked/selected that row.

If it was a row that has a white background then I would put a greyish box-shadow around it when the user clicked/selected that row.

Now the problem being that if I go and select another cell (white or red background) then the previously clicked row is still considered as still being the selected row and therefore its still has the box-shadow and now the "real" selected row also has the box-shadow applied to it.

To make things more complicated (than they really should be), both the white background and red background rows share the same tr.k-master-row.k-state-selected css property. And you can select more than one row using the Shift click or Ctrl click means.

Is there any way/trick via jQuery that I can un-select whatever previous selected row(s) and have it only show the box-shadow on what the current user row(s) selected?

CodePudding user response：

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

You've already described the solution in plain language, you just need to implement it in JS! :-) Here's a working snippet:

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

You really should be using CSS, rather than inline styles, and it is even a bit simpler when you do, here's an example of how you could do that:

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

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.

Yep, that complicates things. However there are plenty of examples of how to do that here on SO - here's one: selecting multiple elements using shift and mouse click - jquery

So using that approach:

if it is a plain click, first remove all highlighted rows, and then add the highlighted class to the clicked row (we've already done this part);
if it is a shift-click, add the highlighted class to the clicked row, without removing any current highlights;
but what if it is already highlighted on shift-click? In that case we want to remove the highlight from the clicked row, without removing any other current highlights;

Here's a working snippet demonstrating that:

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