CodeCharge Studio
search Register Login  

Visual Web Reporting

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> PHP

 Hover on table rows

Print topic Send  topic

Author Message
infinity001

Posts: 2
Posted: 09/10/2015, 1:23 AM

Hello

I want to make change on background color at row when I hover over the row.
Example of row is:
<tr class="Row">
<td>{test1}</td>
<td>{test2}</td>
<td>{test3}</td>
<td>{test4}</td>
</tr>

I tried to make in Style_doctype.css this:
.Row:hover {
background-color: #CCCCCC;
}

But only one table(cell) in that row will change on hover over the row.
Also tried:

.Row :hover tr{
background-color: #CCCCCC;
}

And then still nothing.

I tried with Javascript also and still nothing:

<tr class="Row" onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
----------------------
<script type="text/javascript">
// Specify the normal table row background color
// and the background color for when the mouse
// hovers over the table row.

var TableBackgroundNormalColor = "#ffffff";
var TableBackgroundMouseoverColor = "#9999ff";

// These two functions need no customization.
function ChangeBackgroundColor(row) { row.style.backgroundColor = TableBackgroundMouseoverColor; }
function RestoreBackgroundColor(row) { row.style.backgroundColor = TableBackgroundNormalColor; }
</script>


How to get entire row to be changed for background color on hover?

Thanks.




<tr class="Row">
View profile  Send private message
MichaelMcDonald

Posts: 638
Posted: 09/10/2015, 4:17 AM

http://www.w3schools.com/jquery/event_hover.asp


jquery

$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});

There will be a name somewhere for the TD element that does on row hover with down & up arrow...

Also, there is a bootstrap theme which does it...
One of these does it CSS can't remember which one....
https://bootswatch.com/


_________________
Central Coast, NSW, Australia.

View profile  Send private message
infinity001

Posts: 2
Posted: 09/10/2015, 7:14 AM

Quote MichaelMcDonald:
http://www.w3schools.com/jquery/event_hover.asp


jquery

$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});

There will be a name somewhere for the TD element that does on row hover with down & up arrow...

Also, there is a bootstrap theme which does it...
One of these does it CSS can't remember which one....
https://bootswatch.com/



It doesn't work if I change "p" to "tr" element.


Actually, all these scripts (css, javascript or jquery) work if I remove class Row from <tr> element. But if that class is mention then there are no effects.

I want to keep class Row in tr element and add hover effect of changing background.
View profile  Send private message
MichaelMcDonald

Posts: 638
Posted: 09/10/2015, 1:46 PM

Just some stuff to try:

Give the table an id such as table_hover, then using using jquery add multiple classes definitions.

This example is from bootstrap using it's table css elements and maybe see if you can further append the class definitions with Row from your stylesheets...


<script type="text/javascript">
$().ready(function() {

$('#table_hover).attr('class', "table table-condensed table-responsive table-bordered Row");
}
});
</script>

I am using jquery for everything these days as there is much more cross browser support. A specific example of this is using jquery's AJAX POST instead of js's httpxmlrequest. All the good credit card/payment processing sites have gone over to jquery too.

_________________
Central Coast, NSW, Australia.

View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

PHP Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.