Trying to utilize JQuery datatable,
Wanting to modify the row color when hovered over (the highlighted row)
Attempted solution:
table.display tr.even.row_selected td {
background-color: red;
}
table.display tr.odd.row_selected td {
background-color: blue;
}
Consider using this CSS:
table.display tbody tr:nth-child(even):hover td{
background-color: green !important;
}
table.display tbody tr:nth-child(odd):hover td {
background-color: yellow !important;
}
One of my favorite JavaScript snippets to include at the beginning of a project is one that enhances table formatting. Just insert this code snippet inside your $(function() { ... }); block.
$('table tr').mouseover(function() {
$(this).addClass('row_selected');
});
$('table tr').mouseout(function() {
$(this).removeClass('row_selected');
});
Additionally, this snippet simplifies the process of adding alternating row styles (odd/even) to your table rows while constructing it.
$('table').each(function() { $(this).find('tr:even').addClass('even'); });
$('table').each(function() { $(this).find('tr:odd').addClass('odd'); });
Is this what you are looking for?
table.display tbody .odd:hover {
background-color: red !important;
}
table.display tbody .even:hover {
background-color: blue !important;
}
Give this a shot
table.display tr.even td:hover{
background-color: green;
}
table.display tr.odd td:hover{
background-color: yellow;
}
Just follow these steps:
#example tr td {
height: 50px;
}
table.display tr.even td:hover {
background-color: red;
}
table.display tr.odd td:hover {
background-color: blue;
}
To change the color of an entire row, you can use the following CSS code:
#sample tr td {
height: 50px;
}
table#sample tr.even:hover td {
background-color: green;
}
table#sample tr.odd:hover td {
background-color: yellow;
}
Could you please give this a try? When using CSS, only the td elements will have their color changed. This code snippet is intended to change the row color:
Here's an example:
$(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's not necessary, you can remove the sorting_1 class name from the first td element, or alternatively, you could simply overwrite the existing CSS.
When encountering a problem with the table CSS being overridden by JavaScript styling, I found that using the createdRow callback during the initialization of the table with jQuery resolved the issue:
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;');
}
}
});
For more information, you can refer to the documentation for Datatable createdRow.
Trying to gather user input and then pass it to another PHP script for utilizing in a MariaDB query. Index.php: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="robots" content=&q ...
I am trying to create a background color that changes based on the orientation of the device. Here is the code I have been using: <meta name="viewport" content="width=device-width"> ... @media all and (max-device-width: 360px) { div { background- ...
Parent element is a div with a width of 300px and a height of 40px, containing a child input. In the following code snippet: myinput = document.getElementById("e2"); myinput.style.cssText ='width:100%;height:100%;padding:0px;margin:0px;' div{ ...
I am facing an issue concerning the responsive navbar functionality on my website. The problem occurs when the screen width drops below 1024px. Initially, the navbar is designed to switch to a responsive mode upon clicking the burger menu, which is impleme ...
I'm having trouble with my navbar dropdown menu extending off the page to the right. Take a look at the code below: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...
I currently have Node v14.5.0 installed and I'm using ts-node-dev in my development environment However, I am encountering an error every time I try to compile to JS. Initially, I attempted with the following tsconfig: "target": "es5& ...
Is there a way to integrate this algorithm into a client-side function? I'm looking to use the RAKE Module within a browserified function on the client side. You can find the RAKE Module on GitHub here: https://github.com/waseem18/node-rake To compi ...
After applying some CSS to reduce the height of the images, I encountered an issue where the last image expands in width, creating a white space or margin on the right side of the page. The first three images do not exhibit this problem, leaving me puzzled ...
Encountering issues while attempting to install npm on Ubuntu 16.04 using the command sudo apt-get install npm. The errors received are as follows: The following packages have unmet dependencies: npm : Depends: nodejs but it is not going to be installed ...
https://i.sstatic.net/XRMR0.png I am looking to customize my Table component in Ant Design by using Radio buttons instead of default checkboxes for rowSelection. Is this possible? If not, how can I limit the user to selecting only one row at a time? ...
Currently, I am facing an issue while working on my first app. The problem arises with a form component that should send an object via an onSubmit handler. onSubmit = (e) => { e.preventDefault(); this.props.onSubmit({ title: ...
Modifications to the function fnAddData() in DataTable have caused compatibility issues with angularJS $resource.query(): this.fnAddData = function( data, redraw ) { var api = this.api( true ); /* Check if we want to add multiple ...
I have developed a grocery list application where each row contains the name of a food item. The layout includes a left column for items that are not needed and a right column for items that are needed. Currently, I am able to change the state by clicking ...
While working on a chat app using the MERN stack, I encountered an issue after deploying the server on Vercel. Unfortunately, the app is not functioning properly and the Vercel log shows an error. Legacy server listening... MongoServerError: bad auth : au ...
Is there a way to detect when the browser URL has been modified? I am facing the following situation: On my webpage, I have an iframe that changes its content and updates the browser's URL through JavaScript when a user interacts with it. However, no ...
I'm looking to provide users who fill out a form with confirmation emails that include rich text content. ...
As stated in the PlayFramework Document 2.0 and PlayFramework Document 2.1, it is known that Play can return various responses such as: Ok() badRequest() created() status() forbidden() internalServerError() TODO However, when trying to send a response wi ...
As I embark on my coding journey, I am faced with the challenge of creating a website that features full-width (100%) containers with fixed-width containers nested inside. Despite my efforts to experiment with both figures and divs, I have not been success ...
While attempting to execute my project, I encountered an error in the console related to a function within the code. The exact error message reads as follows: "63:25 error Parsing error: Unexpected token, expected (function toggleDrawer = (open) => () ...
I am dealing with an array of tuples: var tuparray: [string, number][]; tuparray = [["0x123", 11], ["0x456", 7], ["0x789", 6]]; const addressmatch = tuparray.includes(manualAddress); In my function, I aim to verify if the t ...