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
Related
How can I dynamically add !important for all CSS properties?
For example in my <head></head> section I have:
<style>
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.main-container {
border: 3px solid yellow;
padding: 10px 5px;
margin: 3px;
}
</style>
I need:
<style>
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
.main-container {
border: 3px solid yellow !important;
padding: 10px 5px !important;
margin: 3px !important;
}
</style>
I tried to use Window.getComputedStyle(), but I must provide to this method the element for which I want to get the computed style. In my case I can't provide these elements.
I was having an issue with printing (with css styling) in Chrome and Firefox..
even adding -webkit-print-color-adjust: exact!important; didnt work in my case
until i figured out that the style need to have !important attribute. When working with WYSWYG Editor, this could be a problem for printing. So I need to add !important to every css style attribute found in every element.
Here's how I solved it using jQuery
//add !important rule to every style found in each element
//so the browser print render the color/style also
var el = $('.content *');
if (el.length) {
el.each(function(item) {
var _this = $(this);
var attr = _this.attr('style');
var style = '';
if (typeof attr !== typeof undefined && attr !== false) {
if (attr.split(';').length) {
attr.split(';').forEach(function(item) {
if (item.trim() != '') {
style += item.trim() + '!important;-webkit-print-color-adjust: exact!important;';
}
});
_this.attr('style', style);
}
}
});
}
Here's the result in Printing Preview before and After adding the Code Hack
I run into this problem with pandas DataFrame Styler. It generated a <style> tag element with all the styling info. But the styling is overridden by linked css files.
So my solution is to replace all ; with !important; using JavaScript
CSS:
<style type="text/css" >
#T_195822c0_1b0f_11e9_93d2_42010a8a0003row10_col4 {
background-color: yellow;
} #T_195822c0_1b0f_11e9_93d2_42010a8a0003row73_col5 {
background-color: yellow;
} #T_195822c0_1b0f_11e9_93d2_42010a8a0003row100_col2 {
background-color: yellow;
}</style>
Javascript:
var st = document.getElementsByTagName("STYLE")[0];
st.innerHTML = st.innerHTML.replace(/yellow;/g,'yellow !important;')
You can adapt replace rules to your need.
<table verticalAlign="${'center'}" tableType="${'bordered'}"
tableStripes="${'horizontal'}" id="searchResultsTable"
cssClass="tablesorter">
<thead>
<## Heading ##tableRow>
<a:tableColumnHeading id="sort">F</a:tableColumnHeading>
<a:tableColumnHeading>Id</a:tableColumnHeading>
<a:tableColumnHeading id="sortOnb">certificate</a:tableColumnHeading>
<a:tableColumnHeading>Issue Date</a:tableColumnHeading>
<a:tableColumnHeading id="sortOnc">Expiry Date</a:tableColumnHeading>
<a:tableColumnHeading id="sortOnd">Owner Group</a:tableColumnHeading>
<a:tableColumnHeading>Can</a:tableColumnHeading>
<a:tableColumnHeading>Algo</a:tableColumnHeading>
<a:tableColumnHeading>Size</a:tableColumnHeading>
</a:tableRow>
</thead>
jquery to disable sorting in $.ready func
$("#searchResultsTable").tablesorter({
{
header:
1 : { sorter : false },
3 : { sorter : false}
.
.
.
}
});
table sorter css
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
}
table.tablesorter thead tr .header {
background-image: url(tableSorterImages/bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(tableSorterImages/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(tableSorterImages/desc.gif);
}
i want to disable those header which dont't have id , i tried above jquery but it changes the color of header . Is there any way to disable them without having change in color.
i have tried this also , Suppose id="id" for 2nd column
$("#id").data("sorter", false);
I'm trying to achieve a highlight effect in my textarea, basically as a user types a sentence, a background color is being added, similar to this effect: http://jsbin.com/josatozeyi/1/edit (I know it's the resizing of textarea but is there any other way?)
<textarea class='animated'>With CSS transition.</textarea>
Any suggestions?
ADDITIONAL INFO
This is what I meant: http://prntscr.com/63xdi9
It's too complicated to me, however I found this, it might be useful:
highlightTextarea aim is to highlight portions of text into a textarea
or a input. It can highlight a set of words or a specific range.
http://mistic100.github.io/jquery-highlighttextarea/
Source: mistic100
Add a css rule that adds a background color to the textarea on focus.
input:focus {
background-color: yellow;
}
You can achieve the affect you want with contenteditable span element, and then applying a background color on focus: http://jsfiddle.net/13L9zudf/
$(document).ready(function(){
var defaultVal = "Type content here...";
$("div.textbox span").keyup(function(){
if($(this).html() == "")
{
$(this).html(defaultVal);
}
}).keydown(function(){
if($(this).html() == defaultVal)
{
$(this).html("");
}
});
});
div.textbox {
border: 1px #000 solid;
padding: .5em;
width: 30em;
height: 10em;
overflow-y: scroll;
}
div.textbox span {
line-height: 1.5em;
max-width:30em;
display: inline-block;
}
div.textbox span:focus {
background: #ff0;
border:0;
outline: 0;
}
div.textbox span:active {
border: 0;
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textbox">
<span contenteditable="true">Type content here...</span>
</div>
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 */
}
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/