We Keep Coding

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

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?

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 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.
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 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>

Why doesn't `tbody` set the background color in a table?

I am using <tbody> as a CSS selector to set the background-color in a table. I'm doing this because I have multiple <tbody> sections within the table, and they have different background colors.
My issue is that when using border-radius on the cells, the cell doesn't respect the background-color of the tbody. That is, the border radius cuts out the corners in the default background color (in this case white), not the tbody color (in this case, green), below.
UPDATE: This problem occurs in Chrome/Safari, but not in Firefox (just tested myself on all 3). Still looking for a workaround on Chrome (FOUND! See accepted answer).
tr:first-child td:first-child {
background-color: red;
border-radius: 25px;
}
table {
border-spacing: 0px;
}
table tbody {
background-color: green;
}
<table>
<tbody>
<tr>
<td><p>TOP LEFT</p></td>
<td><p>TOP RIGHT</p></td>
</tr>
<tr>
<td><p>BOT LEFT</p></td>
<td><p>BOT RIGHT</p></td>
</tr>
</tbody>
</table>
To be clear, the fix I'm looking for would change the resultant example so it looks like this (I'm just changing the table tbody selector to table only):
tr:first-child td:first-child {
background-color: red;
border-radius: 25px;
}
table {
border-spacing: 0px;
}
table { /* changed this line */
background-color: green;
}
<table>
<tbody>
<tr>
<td><p>TOP LEFT</p></td>
<td><p>TOP RIGHT</p></td>
</tr>
<tr>
<td><p>BOT LEFT</p></td>
<td><p>BOT RIGHT</p></td>
</tr>
</tbody>
</table>
I don't want to do it that way, because I want the background-color to be on the tbody (which I have multiple ones) NOT on the whole table.
Any way to make the tbody color show through?

Try making the <tbody> to render like a block element.
tbody {
background-color: green;
display: block;
}
tr:first-child td:first-child {
background-color: red;
border-radius: 25px;
}
table {
border-spacing: 0px;
}
tbody {
background-color: green;
display: block;
}
<table>
<tbody>
<tr>
<td><p>TOP LEFT</p></td>
<td><p>TOP RIGHT</p></td>
</tr>
<tr>
<td><p>BOT LEFT</p></td>
<td><p>BOT RIGHT</p></td>
</tr>
</tbody>
</table>

An updated answer for other users, if it helps.
On Chrome, the display: block fixes the issue. However, it causes other layout issues with the table, where it does not seem to respect widths. Using display: table instead seems to resolve both issues:
tbody {
background-color: green;
display: table;
}

Set cellspacing to 0, borders on the table to none, and collapse the table borders (to make sure there is not space around the colored boxes). Then apply the background color to the TD elements instead of the tbody element.

animate the table rows to slide out or fade in?

I stumbled upon this plugin
https://jquery-datatables-row-grouping.googlecode.com/svn/trunk/customization.html
the problem is, everything is in <tr>s and I fear you cannot animate them?
Is there really no way? CSS or javascript wise.
e.g. I want to animate a tables tr elements.

Maybe one solution could be like that :
var animate = function(evt) {
//we go to the 'tr' tag
$el = $(evt.currentTarget).parent().parent();
//we hide the 'td's tag
$el.find('td').hide(333 , function(){
// we reduce the height of 'tr' tag
$el.animate({height : 0} , 777)
});
}
$('button').click(animate);
table {
border: solid 1px #AAA;
padding: 3px;
border-collapse: separate;
}
td {
height: 50px;
margin : 3px;
min-width : 50px;
border: solid 1px orange;
}
tr {
height : 55px;
padding : 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>a</td><td>b</td><td><button>hide</button></td>
</tr>
<tr>
<td>a</td><td>b</td><td><button>hide</button></td>
</tr>
<tr>
<td>a</td><td>b</td><td><button>hide</button></td>
</tr>
</table>

Styling tables using CSS

I have a problem with styling tables using CSS.
So I have a table in my HTML file:
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>
Here is my JavaScript file:
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
And here is my CSS file:
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.oddrowcolor{
background-color:#d4e3e5;
}
table.evenrowcolor{
background-color:#c3dde0;
}
The problem is that it is not changing color neither odd rows nor even odd.
What am I doing wrong?
Thanks.

I'll provide you a CSS solution for this:
table.class_name tr:nth-child(odd) {
/* Styles */
}
table.class_name tr:nth-child(even) {
/* Styles */
}
That's all you need, although it’s not supported in IE 8 and earlier.
Demo
For your table headers, you can simply use a different selector to over ride the background styles like
table.altrowstable tr th {
background: #fff;
}
Demo 2

I did check your code and found a little correction iin the css is needed to get the expected solution. There should be an empty space between the table and row classname.
table .oddrowcolor{
background-color:#d4e3e5;
}
table .evenrowcolor{
background-color:#c3dde0;
}

I like to provide solutions that dont tinker or modify the original source much.
Your HTML is fine, JScript is fine(very fine). Good to see that you use the .classname so that is is cross brwoser compatible.So all i did is change the classes for the CSS
YOUR CODE
table.oddrowcolor {
background-color:#d4e3e5;
}
table.evenrowcolor {
background-color:#c3dde0;
}
MY CHANGE
tr.oddrowcolor {
background-color:#d4e3e5;
}
tr.evenrowcolor {
background-color:#c3dde0;
}
WORKING FIDDLE
total change from your code to mine. 8 characters. Simple ain't it?

You have a problem within your CSS. You are setting the class for table, while as it should be for td.
You also need to modify your below js as style can be applied to td and not to tr
var rows = table.getElementsByTagName("td");
Here is the problem in your CSS
table.oddrowcolor{
background-color:#d4e3e5;
}
table.evenrowcolor{
background-color:#c3dde0;
}
You should be using this instead
table td.oddrowcolor{
background-color:#d4e3e5;
}
table td.evenrowcolor{
background-color:#c3dde0;
}
jsFiddle

Try this one ...see the Demo
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

html: hover table column [duplicate]

This question already has answers here:
Cols, colgroups and css ":hover" pseudoclass
(5 answers)
Closed 7 years ago.
How can I change the background column of an html table column when the mouse is over it?
Preferably with css only.

This can be done using CSS with no Javascript.
I used the ::after pseudo-element to do the highlighting. z-index keeps the highlighting below the <tds> in case you need to handle click events. Using a massive height allows it to cover the whole column. overflow: hidden on the <table> hides the highlight overflow.
Demo: http://jsfiddle.net/ThinkingStiff/2XeYe/
Output:
CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
HTML:
<table>
<tr>
<th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
</tr>
<tr>
<th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>

I have a more simple solution (Live example: http://jsfiddle.net/q3HHt/1/)
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
table, td {
border: 1px solid black;
}
td {
width: 40px;
height: 40px;
}
.highlighted {
background-color: #348A75;
}
jQuery:
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').removeClass('highlighted');
});
Live example: http://jsfiddle.net/q3HHt/1/

Only works for cells or rows, sorry.
e.g.
td {
background-color: blue;
}
td:hover {
background-color: red;
}
There are JavaScript solutions available but nothing in CSS right now will do what you want because of the limitations of selectors.
td /* all cells */
{
background-color: blue;
}
tr /* all rows */
{
background-color: pink;
}
/* nothing for all columns */

Just to extends Muhammads answer (https://stackoverflow.com/a/11828637/1316280), if you want to highlight the cols only in the actual table, change the jquery-code-part to:
this jsfiddle is specific for only the actual table
jQuery
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$(this).parents('table').find('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
var t = parseInt($(this).index()) + 1;
$(this).parents('table').find('td:nth-child(' + t + ')').removeClass('highlighted');
});
jsFiddle: http://jsfiddle.net/q3HHt/123/

I do not think there is a clean HTML + CSS way to do this. Javascript is an alternative, for example the jQuery tableHover plugin

I had a similar problem where I had too many columns to display on screen. VIA PHP, I turned each row into a 1 x column table. So, n rows = n tables. I then nested each table within a master table. Doing so allowed me to call td:hover from my stylesheet. Since each td held a table, it has the same effect of highlighting the a column when I mouse over it.

You can try experimenting with <col> tag and col:hover { background: red; } style, but I doubt that it will work. Anyway, this definitely won't work in older versions of MSIE, so you will need javascript in order to do this.

You can highlight the whole row with pure CSS using:
tr td {background-color: red;}
tr:hover td {background-color: blue;}
Achieving this effect for a column is impossible with this approach, as cell (td) is a child of a row (tr), not a column.
To make it work in IE7+, make sure to add doctype declaration (what you should always do anyway:)).