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>

How to make table responsive and attractive using bootstrap?

I have to show table in a responsive and attractive manner using bootstrap. Currently, it is looking like a simple table and I want it to be eye catching using bootstrap.
I have used simple html and nothing else and want to make it look attractive.
here is my code-
var table = $("<table>");
table.append($("<tr><th>column1</th><th>column2</th></tr>"));
for (var i = 0; i < 2; i++) {
var row = $('<tr ><td>' + 'data' + '</td><td>' + 'data' + '</td>
</tr>');
table.append(row);
}
$("#table").html(table);
div content-
<div id="table">
</div>
css-
#table {
margin-top: 20px;
border-collapse: collapse;
width: 500px;
}
#table th {
border: 1px solid black;
text-align: left;
}
I am using simple css and html and want to use bootstrap to make my table look attractive and responsive.

If you are using Bootstrap, there is no need to create your own responsive class, because there is already a responsive class available for table elements:
<table class="table responsive">
...
</table>

If you are using Bootstrap use
<table class="table-responsive">
</table>
or other wise use css
#table{
width:100%;
}

You can try this:
table {
border-collapse: collapse;
width: 100%;
}
table th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table tr:hover {background-color:#f5f5f5;}

how to change a table cell border color by assigning css class? [duplicate]

I want to put a line above some field in a table, to indicate that it is a sum of the above values. However, the table already has borders by default.
Here is an example: I have a table with borders collapsed. I set the border-bottom on one field, and the border-top on the field below it. Both of these specify the same border. The CSS for the top one is used. Is there a way to use the bottom one?
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td.first { border-bottom: solid red 1px; }
td.second { border-top: solid gold 1px; }
</style>
<body>
<table>
<tr><td class="first">Hello</td></tr>
<tr><td class="second">World</td></tr>
</table>
</body>
</html>
This shows two cells with a red line between them. Is there way to get a gold line?

This is a defined behavior of border-collapse. Page 357 of the O'Reilly CSS Definitive Guide 3rd Edition says:
if collapsing borders have the same style and width, but differ in color, then ... from most to least preferred: cell, row, row group, column, column group, table.
if ... come from same type of element, such as two rows... then color is taken from borders that are the topmost and the leftmost.
So the topmost, which is red, wins out.
One way to override this may be to use cell for the color to win over the color for the row.
example: http://jsfiddle.net/Chapm/
The rules that have higher precedence than this "same color rule is"
wider border wins over narrower ones
and after that,
double wins over solid, then dashed, dotted, ridge, outset, groove, inset
You can use 2px for the gold for it to win over, and I tried in Chrome to use 1px but double, and it appears as 1px solid and it will win over the red as well. Although if you want to use this method, then it may be best to make sure the browsers you support behave the same using this technique.
http://jsfiddle.net/Chapm/2/

Just change border-collapse to separate and set border-spacing to zero.
Note: IE8 supports the border-spacing property only if a !DOCTYPE is specified.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table {
border-collapse: separate;
border-spacing: 0px;
}
td.first {
border-bottom: solid red 1px;
}
td.second {
border-top: solid gold 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="first">Hello</td>
</tr>
<tr>
<td class="second">World</td>
</tr>
</table>
</body>
</html>
Tested on win7 with:
Chrome 16,
IE 9,
FF 9,
Safari 5.0.5.

Remove border-collapse: collapse; from your code, instead set cellspacing attribute to 0 for your table.

I know it's an old question but just came across the issue and I solved it like this
table {
border-collapse: collapse;
}
td.first {
border-bottom: solid red 1px;
}
td.second {
border-top: solid gold 1px;
position: relative;
}
tr:not(:first-child) td.second::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: gold;
}
<table width="280">
<tr><td class="first">Hello</td></tr>
<tr><td class="second">World</td></tr>
<tr><td class="second">World</td></tr>
<tr><td class="second">World</td></tr>
</table>

Just remove the td.first { border-bottom: solid red 1px; } from your style.
Or change red to gold in the td.first selector.
Example here.

Dynamically set table cells children div heights to 100% its row height

I am trying to "dynamically" update the height of each divto be equal to its row parent
I have this very simple code that does the job good but throughout all rows. So what I am finallygetting is setting all td divs with the greatest value within the whole table, which I don't want.
What I want is, to set all divs with the greatest height within the same row
Any suggestions?
function setdivHeights() {
var maxHeight = -1;
$('tbody tr td div:last-child').each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$('tbody td div:last-child').height(maxHeight);
$('tbody td div:last-child').addClass('cell');
}
and this is a simplified sample of my html code:
<table class="tablesorter" id="list">
<thead></thead>
<tbody>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
<tr>
<td><div>a</div></td>
<td><div>b</div></td>
<td><div>c</div></td>
<td><div>d</div></td>
</tr>
</tbody>
</table>

Just do it per row instead of for all rows in your selector:
function setdivHeights() {
trs = $('tbody tr');
trs.each(function(){
var maxHeight = -1;
$(this).find('td div:last-child').each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
}).height(maxHeight).addClass('cell')
})
}

Hi I have no idea if I understood you, but if you have a height and width on the td's, you can simply give to the dive with css a height and width of 100% and it should fill it. The red border is the dimension of the td's and the blue box is the filled div... I think there is no JS needed for such a solution, because, when you give the css 100% of height, it takes the value of it's parent element, in this example the div would take the 20px of his parent, the td, and fill it. If I did'nt understood you're question, than sorry :)
.tablesorter tbody tr td {
height: 20px;
width: 70px;
border: 2px solid red;
}
.tablesorter tbody tr td div {
height: 100%;
width: 100%;
background-color: blue;
}
<table class="tablesorter" id="list">
<thead></thead>
<tbody>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
<tr>
<td><div>a</div></td>
<td><div>b</div></td>
<td><div>c</div></td>
<td><div>d</div></td>
</tr>
</tbody>
</table>

try to use border-collapse: collapse and border-spacing: 0
table {
width: 200px;
border-collapse: collapse;
border-spacing: 0;
}
tr td {
padding: 0;
width: 70px;
height: 50px;
}
tr td div {
width: 100%;
height: 100%;
background-color: green;
}

Emulate hovering over an element

I'm trying to emulate hovering over an element with a mouse, using jQuery.
This is different from adding :hover to the element; I want something similar in function to using $(element).click(), however doing $(element).hover() doesn't work for me.
The element in question is (as far as I can see) using the jQuery UI datepicker with a tooltip on hover; for a live example, see an AirBnB listing, click the "dates" calendar input on the right hand side and hover over an available date.
I want to trigger the hover over each available date to get the price to hover above, although doing:
$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)').each(function(){
$(this).hover()
})
or simply
$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)')[0].hover()
doesn't work for me, nor does using mouseover(). Any idea how I can replicate this behaviour?

You should try trigger-ing the event:
$("element").trigger('mouseenter');
Also look at this post on SO, looks very similar to yours.

Well, you can do this just with CSS, here's a simplified example:
.td-hover td {
position: relative;
width: 1em;
border: 1px solid #ddd;
}
.on-hover {
display: none;
position: absolute;
top: -1.5em;
left: -1em;
background: #eee;
border: 1px solid black;
}
.td-hover td:hover .on-hover {
display: inline-block;
}
<table class="td-hover">
<tbody>
<tr>
<td>1<span class="on-hover">one</span></td>
<td>2<span class="on-hover">two</span></td>
<td>3<span class="on-hover">three</span></td>
<td>4<span class="on-hover">four</span></td>
<td>5<span class="on-hover">five</span></td>
<td>6<span class="on-hover">six</span></td>
<td>7<span class="on-hover">seven</span></td>
</tr>
<tr>
<td>8<span class="on-hover">eight</span></td>
<td>9<span class="on-hover">nine</span></td>
<td>10<span class="on-hover">ten</span></td>
<td>11<span class="on-hover">eleven</span></td>
<td>12<span class="on-hover">twelve</span></td>
<td>13<span class="on-hover">thirteen</span></td>
<td>14<span class="on-hover">fourteen</span></td>
</tr>
</tbody>
</table>
But if you insist on using JavaScript instead, just use jQuery's hover to add/remove a class:
$(".td-hover td").hover(
function() {
$(this).find(".on-hover").addClass("showing");
},
function() {
$(this).find(".on-hover.showing").removeClass("showing");
}
);
.td-hover td {
position: relative;
width: 1em;
border: 1px solid #ddd;
}
.on-hover {
display: none;
position: absolute;
top: -1.5em;
left: -1em;
background: #eee;
border: 1px solid black;
}
.on-hover.showing {
display: inline-block;
}
<table class="td-hover">
<tbody>
<tr>
<td>1<span class="on-hover">one</span></td>
<td>2<span class="on-hover">two</span></td>
<td>3<span class="on-hover">three</span></td>
<td>4<span class="on-hover">four</span></td>
<td>5<span class="on-hover">five</span></td>
<td>6<span class="on-hover">six</span></td>
<td>7<span class="on-hover">seven</span></td>
</tr>
<tr>
<td>8<span class="on-hover">eight</span></td>
<td>9<span class="on-hover">nine</span></td>
<td>10<span class="on-hover">ten</span></td>
<td>11<span class="on-hover">eleven</span></td>
<td>12<span class="on-hover">twelve</span></td>
<td>13<span class="on-hover">thirteen</span></td>
<td>14<span class="on-hover">fourteen</span></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>