CSS nth-child is over-riding jQuery click highlighting - javascript

I have a table with row striping, set by CSS, and I also have a click function in jQuery. My code:
$(document).on('click', '.datarow', function() {
$(".datarow").removeClass("highlight");
$(this).addClass("highlight");
// other code for row select
});
#datatable tr:nth-child(odd) {
background-color: #fff;
cursor: pointer;
}
#datatable tr:nth-child(even) {
background-color: #fafafa;
cursor: pointer;
}
#datatable tr:hover {
background-color: #ddd;
}
#datatable tr .highlight {
background-color: #fbbc05;
}
<table id="datatable">
<tr class="datarow">...</tr>
...
</table>
The jQuery row highlighting doesn't work.
But, if I remove the CSS nth-child code, then the jQuery does work as expected.
So the CSS nth-child highlighting is over-ruling the jQuery highlighting the one row when clicked on.
How can I get both working together?
I tried following this answer how can I use jquery addClass when selecting a tr to override a nth-child class on a parent div? by increasing my ".highlight" to "#datatable tr .highlight" but still no luck.

How can I get both working together?
Well your CSS is incorrect to begin with:
#datatable tr .highlight {
background-color: #fbbc05;
}
Says an element inside a tr has a class of highlight but your jquery is applying the class directly to the tr so you should use:
#datatable tr.highlight {
background-color: #fbbc05;
}
The subtle difference is the single space between the tr and .highlight.
tr .hightlight {}
is VERY different from
tr.hightlight {}
I'd also HIGHLY recommend reading Decoupling Your HTML, CSS, and JavaScript. Your CSS is very tightly coupled to your html.

Related

How do I change the print alignment for individual columns in DataTables?

I was able to use the customize function (given below) to modify the alignment in print layout, but unfortunately this applies to the whole table and all its columns.
How do I change the print alignment of individual columns (that I set and choose)?
My current code:
customize: function (win){ $(win.document.body).find('table').css('text-align', 'right'); },
Jsfiddle:
https://jsfiddle.net/6724x3LL/
First I tried this and it did not seem to work:
Js
"columnDefs": [ { className: "col_1",
"targets": [0] },
{ className: "col_2", "targets": [1] },
{ className: "col_3", "targets": [2] } ]
CSS
.dataTable tbody td.col_1 {
text-align: right;}
.dataTable tbody td.col_2 {
text-align: center;}
.dataTable tbody td.col_3 {
text-align: left;}
Setting classes for the columns in JavaScript using columnDefs, and then subsequently styling those classes in CSS only affected the html table render itself, the CSS was not carried over to the print layout.
However I was able to find a solution to this.
By using this script code within the customize option of print:
customize: function (win){
$(win.document.body).find('table tbody td:nth-child(1)').css('text-align', 'right');
Where each column would be set with the nth child.
Or alternatively use this pure CSS method:
.dataTable tbody tr td:nth-child(1) {
text-align: right;}
.dataTable tbody tr td:nth-child(2) {
text-align: center; }
.dataTable tbody tr td:nth-child(3) {
text-align: left; }

How to remove css element that targets table with javascript

I'm trying to remove a bit of css from a certain page as I'm using an Google Org Chart in my drupal site and some of my css is overriding what is already there. Here is the code below.
What I want to remove:
.MainBlock table td {
border-right: 1px solid #045273;
border-bottom: 1px solid #045273;
vertical-align: top;
}
I've tried a number of things, but nothing has worked. All attempts that I haven't removed are below.
<script type="text/javascript">
if (document.URL.indexOf("/node/7794/draft") >= 0) {
//$('.MainBlock').find("table tr").css("border-bottom","");
//$(".MainBlock table td").css("border-bottom":"12px Solid #000");
$(".MainBlock table td").css({ 'border-bottom' : ''});
}
I need it to ignore that line of css, as it's needed on other pages. That, and setting it to 0 or none sort of breaks it.
You can use 0 or none to remove the border, an empty string does not work.
$( '.MainBlock table td' ).css( { 'border-bottom' : 0 } );
.MainBlock table td {
border-right: 1px solid #045273;
border-bottom: 1px solid #045273;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MainBlock">
<table>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
Ultimately I'd stick to CSS if you can. Ensure that you place the same selector after the original and it will override it.
/* original rule */
.MainBlock table td {
border-right: 1px solid #045273;
border-bottom: 1px solid #045273;
vertical-align: top;
}
/* sometime later, maybe in a different file */
.MainBlock table td {
border-bottom: 0;
}
An alternative is to increase the selectors specificity. Since it's a Drupal site there should be a page ID to hook onto to, something like:
.page-node-2793683 .MainBlock table td {
border-bottom: 0;
}
EDIT
Per clarification and #EF it:
To prevent the styles being applied to a particular page you can use :not() pseudo selector.
div:not(.page-node-2793683) .MainBlock table td {
border-right: 1px solid #045273;
border-bottom: 1px solid #045273;
vertical-align: top;
}
<div class="page-node-2793683">
<div class="MainBlock">
<table>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
<div class="page-node-10">
<div class="MainBlock">
<table>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
Note: While not required, using not() without a selector proceeding it may not work reliably. The example above may need to be modified to suite your needs.
The beauty of css and the "cascade" (the 'c' in css) is that you don't need javascript to change the way something looks. All you need is a style sheet overrides the "rule" in the other style sheet. Your new rule just has to be more specific and it only needs the properties you are trying to override. In this case
border-bottom: 0;
Have a look at Specificity to learn how to make your rule specific enough to override the old rule.
From the jquery docs http://api.jquery.com/css/#css-propertyName-value:
$( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied
This can't work because border-bottom wasn't assigned directly (i.e. with the style attribute), but through a css rule.
12px Solid doesn't work because it is not valid (the color is missing).
Anyway, I'd suggest to tackle this problem by css directy, not by js
.node-7794 .MainBlock table td {
border-bottom: 0 none;
}
If the rule doesn't work, use the developer console of your browser to find out why

Prevent a hidden tr from breaking the td widths

I am collapsing table rows and using jQuery to toggle them. However, when the hidden rows are shown, the width of the td elements in the first tr are recalculated. This is exhibited on my example:
$("tr:first").click(function(){
$(this).next('tr').toggle();
});
tr{
display: none;
}
tr:first-of-type{
display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>
(Fiddle if preferred: http://jsfiddle.net/8u070tkf/)
How can I force the flow of the hidden row, but still toggle the visibility of the second tr?
You would have better to toggle a class and set visibility CSS property:
$("tr:first").click(function(){
$(this).next('tr').toggleClass('shown');
});
CSS:
tr:not(:first-of-type):not(.shown){
visibility: hidden;
}
-DEMO-
Not really an answer, but a few hints eventually.
you may relay on colgroup and min-width , unfortunately, display:none; hides width of content.
table-layout and width on table is something to look at too.
http://jsfiddle.net/8u070tkf/2/
$("tr:first").click(function(){
$(this).next('tr').toggle();
});
tr{
display: none;
}
tr:first-of-type{
display: table-row;
}
col {
min-width:2.2em;
}
td {
background:yellow
}
<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<table>
<colgroup><col/><col/> <col/><col/><col/> <col/><col/> <col/></colgroup>
<tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>

Reduce dataTable tr height

I am using dataTable jquery plugin.
I need to reduce the height of the rows, how can I do it? (I need a fixed height)
I tried:
.dataTables tbody tr {
min-height: 35px; /* or whatever height you need to make them all consistent */
}
JSFiddle
tr don't have height.
You'll have to apply the height to its tds
Click here to see the fiddle
CSS's padding will also do the trick - take a look at this example here. This came from this forum discussion.
Change the td padding CSS like this:
table.dataTable tbody th, table.dataTable tbody td {
padding: 1px 1px;
}
Set this in your CSS:
<style>
td {
white-space: nowrap;
max-width: 100%;
}
</style>
These DataTable options will make it even better:
scrollY: "530px",
scrollX: true,
scrollCollapse: true,

tr onmouse events

I want to be able to hover on a row and highlight all of it but I am having an issue with the code below since some cells have a different background.
<tr style="" onmouseover="this.style.background='Red';" onmouseout="this.style.background='#595959'" >
That is fine all all cells have the same background but if I click a cell it highlights it and onmouseout="this.style.background='#595959'" will always reset it.
How can I change that to something like:
onmouseout="this.style.background='currentCellBGColor"
It can be done with a pure CSS solution. No JavaScript needed
Pure CSS solution that will work in IE8+ all other modern day browsers
tr:hover td { background-color:yellow }
td.selected { background-color: green; }
tr:hover td.selected { background-color: lime; }
Fiddle
If you need IE7, you need to add a class onmosueover to the table row and remove the class onmouseout.
tr:hover td, tr.hover td { background-color:yellow }
td.selected { background-color: green; }
tr:hover td.selected, tr.hover td.selected { background-color: lime; }
Even if I agree that is better to make it with css hover, I like to answer to the question, how to do it with javascript.
You can save it on one attribute and use it to restore it as:
<script>
function setBackground(me, color)
{
me.setAttribute("data-oldback", me.style.background);
me.style.background=color;
}
function restoreBackground(me)
{
me.style.background = me.getAttribute("data-oldback");
}
</script>
and
<tr onmouseover="setBackground(this, 'Red');"
onmouseout="restoreBackground(this);"
style="background:blue;" >
and a test : http://jsfiddle.net/AdDgS/3/ and this http://jsfiddle.net/AdDgS/4/

Categories

Resources