Develop Reference

CSS nth-child is over-riding jQuery click highlighting

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.

overriding css class on bootstrap datetime picker when selecting year

I want to override css style on bootstrap datetime picker control when selecting years from default blue to let's say red. How can I do that?
I tried with
.selectYear {
background-color:red!important;
}
but that doesn't work.
Update
I use
https://github.com/Eonasdan/bootstrap-datetimepicker/

It looks like 'selectYear' is a data attribute data-action="selectYear" and the class is 'year'
data-action="selectYear" class="year active"
The css is what's adding the background
.bootstrap-datetimepicker-widget table td span.active {
background-color: #337ab7;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
So either
.bootstrap-datetimepicker-widget table td span.year.active {
background-color: red;
}
Or
.year {
background-color: red !important;
}
Hope this helps

I've searched in plugin code and I haven't found any class name like selectYear.
Assuming that you want to style only the year selector panel, try with the following css rule:
.bootstrap-datetimepicker-widget table td span.year.active {
background-color: red;
}

UPDATE:
Did not see an example. You use wring selector at all. .bootstrap-datetimepicker-widget table td span.active{background-color:red!important;}; selectYear - it`s a data action attribute value

Use
.ui-datepicker-year{
background-color: red;
}

OnClick event to change cell background

Link to JsFiddle
I'm having the need to change the cell's background color everytime the user click on it, but I can't get it to work!
This is my script :
$( function() {
$('.tk099 td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
in which tk099 is the table's class, and I don't want any td tag which has a class be affected by the event. Is this possible? Thanks alot!

Your selector .tk099 td takes presidence over .red-cell because:
It is more specific
It is declared later than .red-cell (and CSS cascades)
Declare .red-cell later on and make it just as specific/more specific:
.tk099 td {
background-color:#EEEEEE;
text-align:center;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
}
td.red-cell {
background: #F00; /* Or some other color */
}
JSFiddle

change css to and should be declared at the after the default css
td.red-cell {
background: #F00; /* Or some other color */
}

Jquery dataTable change row color

I am using JQuery datatable,
I need to change the color of the row on the mouse over event (the highligthed row)
I tried:
table.display tr.even.row_selected td {
background-color: red;
}
table.display tr.odd.row_selected td {
background-color: blue;
}
JSFiddle

Try this CSS:
table.display tbody tr:nth-child(even):hover td{
background-color: red !important;
}
table.display tbody tr:nth-child(odd):hover td {
background-color: blue !important;
}
UPDATED jsFIDDLE DEMO

One of the JS snippets I write at the start of each project is to add some basic formatting to tables. Include this inside your $(function() { ... }); block
$('table tr').mouseover(function() {
$(this).addClass('row_selected');
});
$('table tr').mouseout(function() {
$(this).removeClass('row_selected');
});
Similarly, this bit will take away the hassle of adding odd/even markup to every row in the table, as your are building it
$('table').each(function() { $(this).find('tr:even').addClass('even'); });
$('table').each(function() { $(this).find('tr:odd').addClass('odd'); });

This?
table.display tbody .odd:hover {
background-color: red !important;
}
table.display tbody .even:hover {
background-color: blue !important;
}

Try this
table.display tr.even td:hover{
background-color: red;
}
table.display tr.odd td:hover{
background-color: blue;
}

You can simply do
FIDDLE
#example tr td {
height: 50px;
}
table.display tr.even td:hover {
background-color: red;
}
table.display tr.odd td:hover {
background-color: blue;
}

If you want the whole row to change colour you can do this
#example tr td {
height: 50px;
}
table#example tr.even:hover td {
background-color: red;
}
table#example tr.odd:hover td {
background-color: blue;
}
http://jsfiddle.net/leighking2/t2g9yft6/

Can you try it? In CSS, td only changing color. This will be changing row color
Somthing like this
$(document).ready(function() {
$('#example').dataTable();
$('table.display tr.even').hover(function(){
$(this).css('background-color','#f00');
});
$('table.display tr.even').mouseout(function(){
$(this).css('background-color','#f9f9f9');
});
} );
If it is not mandatory, remove it sorting_1 class name in first td. or can overwrite the css.

I was having an issue with the table css being overwritten if setting the styles with javascript, using the createdRow callback in the initialization of the table with jQuery worked:
var table = $('#myTable').DataTable({...
createdRow: function( row, data, dataIndex ) {
if (dataIndex%2 == 0) {
$(row).attr('style', 'background-color: red;');
} else {
$(row).attr('style', 'background-color: blue;');
}
}
});
see the docs for Datatable createdRow

stop table cell from expanding, or set input to width of table cell

I have been playing around with this and cannot seem to get it functioning as I would like.
here is my example,
I have a table who's cells i'm making editable by replacing their text content with inputs when the user clicks on them. The input is removed after the focus is lost and the cell contents (the input) are replaced by the updated text.
This all works, fabulous. My issue is the cells resize themselves after the text is replaced by the input.
I have set the width of the input to 100%, but that is all I can think of (aside from measuring the cell width and hard-coding it to that width, however I would like to avoid this if possible.)
(see example for html content)
css assume table has ID of #tblListings
#tblListings {
width: 100%;
}
#tblListings thead {
background-color: #dedede;
}
#tblListings td, #tblListings th {
padding: 6px;
border: 1px solid #adadad;
border-bottom: none;
}
#tblListings tbody tr:nth-child(even) td {
background-color: #efefef;
}
#tblListings tbody tr:last-child td {
border-bottom: 1px solid #adadad;
}
#tblListings td input {
width: 100%;
border: none;
outline: none;
background-color: #ff0;
}
javascript I would presume this can be achieved with CSS, however I will post this to be safe.
$("#tblListings tbody").on("click", "td", function(event) {
if (event.target.tagName === "INPUT") return;
var cell = $(this);
var input = $("<input>", {
type: "text",
value: cell.text(),
maxlength: 128
});
cell.empty().css("padding", 0).append(input);
input.focus();
input.on("blur", function() {
cell.css("padding", 6).text(this.value);
});
});

One way to do it would be to set the input to have absolute positioning but keep the original contents in the cell to keep the width the same. See the update here: http://jsfiddle.net/V6rsC/29/.
What I did was set the cell to have relative positioning so that when I set the bounds of the input, it would use the cell instead of the document. I set left, top, right, and bottom of the input to 0px. The width remains the same because the contents are still there, but we cannot see them because the input is in the way. When we are done, the contents are replaced anyway, so know one ever knows the difference.