Hover 效果与 jquery 未更改为默认背景颜色

Question

Problem: I want to add hover effect in the tr element but I have a background color assigned directly that is coming from the database. The hover effect works with jquery when I do a mouseover the color changes, but when I remove the mouse the background color doesn't go back to the previous.

I know this is not the best way to achieve this, if you have any ideia, please share it.

I already try adding a class to the tr element and with css define a hover effect to change the background color, but it didn't work.

<table id="waypointsTable" class="table table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">Nº Pedido</th>
                        <th scope="col">Estado</th>
                        <th scope="col">Comentário</th>
                        <th scope="col">Promotor</th>
                        <th scope="col">Produtor CDM</th>
                        <th scope="col">Sala</th>
                        <th scope="col">Data Evento</th>
                        <th scope="col">Título</th>
                        <th scope="col">Data Criação</th>
                    </tr>
                </thead>
                <tbody>
                        <?php 
                        $requests = $app_R->getrequest($request_id, $user_id);

                        for($i=0; $i<count($requests); $i++){
                          $status = $app_R->getstatus($requests[$i]['Status_id']);
                          $status_color=$status[0]['color'];
                        echo'<tr class="clickable-row" style="background:'.$status_color.';" data-href="index.php?id='.$requests[$i]['Request_id'].'">';
                        echo'<th scope="row">'.$requests[$i]['Request_id'].'</th>';

                            echo '<td>'.$status[0]['name'].'</td>';
                            echo '<td>'.$status[0]['comment'].'</td>';
                            echo '<td>'.$requests[$i]['Promoter'].'</td>';
                            echo '<td>'.$requests[$i]['CDM_produtor'].'</td>';
                            echo '<td>'.$requests[$i]['Room'].'</td>';
                            echo '<td>'.$requests[$i]['Event_date'].'</td>';
                            echo '<td>'.$requests[$i]['Event_Title'].'</td>';
                            echo '<td>'.$requests[$i]['Creation_mod_date'].'</td>';
                            echo'</tr>';
                }
                ?>
                </tbody>
            </table>

Jquery to hover effect

$('#waypointsTable tr').hover(function() {
     $(this).attr('style','background: yellow');
 }, function() {
     $(this).attr("style","background: '.$status_color.'");
 });

Answer 1

As your variable is a php variable, you cannot use it in your javascript like that - instead I would add it to a data attribute on the table row and then change the colour that way

Update php to include data attribute

echo'<tr class="clickable-row" style="background:'.$status_color.';" data-original-color="'.$status_color.'" data-href="index.php?id='.$requests[$i]['Request_id'].'">';

Update js to use data attribute instead of php variable

$('#waypointsTable tr').hover(function() {
   $(this).css('background', 'yellow');
}, function() {
   var original = $(this).data('original-color');
   $(this).css('background', original);
});

I have also changed the js to use .css instead of replacing the entire style attribute (in case something else needs to add styles to the tr)

Answer 2

Please try this

In javascript

 $('#waypointsTable tr').hover(function() {
     $(this).css('background' ,'yellow');
 }, function() {
     $(this).css("background',<?php echo $status_color; ?>);
 });

In CSS

<style>
 #waypointsTable tr:hover {
  background-color: yellow;
}
</style>

Answer 3

Try changing ' to ":

$(this).attr("style","background: " + $status_color + ";");

EDIT: I don't expect it was php.. duhh..

Remove ' then:

$(this).attr("style","background: $status_color;");

Answer 4

Try this. This should works. Also Get status_color in your jquery.

$(function () {
        $("#waypointsTable tr").mouseover(function () {
            $(this).attr("style","background: " + status_color);
        });
        $("#waypointsTable tr").mouseout(function () {
           $(this).css('background' ,'yellow');
        });
    });

Answer 5

TLDR; Why use JavaScript?

It's a bit hard to solve this problem without posting any current CSS styling. If you add the 'css tag' to your question, please to provide the CSS.

The <tr> element is the parent of <td> element. You can use the hover effect on the <tr> (see code-example) to change the background of the <td> . Because it's a child it will fill the space accordingly.

 tr:hover td { background: lightblue; }

 <table id="waypointsTable" class="table table-hover"> <thead class="thead-dark"> <tr> <th scope="col">Nº Pedido</th> <th scope="col">Estado</th> <th scope="col">Comentário</th> <th scope="col">Promotor</th> <th scope="col">Produtor CDM</th> <th scope="col">Sala</th> <th scope="col">Data Evento</th> <th scope="col">Título</th> <th scope="col">Data Criação</th> </tr> </thead> <tbody> <tr class="clickable-row" style="background: blue"> <td>Name</td> <td>comment</td> <td>Promoter</td> <td>CDM productor</td> <td>Room</td> <td>Event date</td> <td>Event title</td> <td>Creation date</td> </tr> <tr class="clickable-row" style="background: green"> <td>Name</td> <td>comment</td> <td>Promoter</td> <td>CDM productor</td> <td>Room</td> <td>Event date</td> <td>Event title</td> <td>Creation date</td> </tr> <tr class="clickable-row" style="background: yellow"> <td>Name</td> <td>comment</td> <td>Promoter</td> <td>CDM productor</td> <td>Room</td> <td>Event date </td> <td>Event title</td> <td>Creation date</td> </tr> <tr class="clickable-row" style="background: pink"> <td>Name</td> <td>comment</td> <td>Promoter</td> <td>CDM productor</td> <td>Room</td> <td>Event date</td> <td>Event title</td> <td>Creation date</td> </tr> <tr class="clickable-row" style="background: pink"> <td>Name</td> <td>comment</td> <td>Promoter</td> <td>CDM productor</td> <td>Room </td> <td>Event date</td> <td>Event title</td> <td>Creation date</td> </tr> <tr class="clickable-row" style="background: pink"> <td>Name</td> <td>comment</td> <td>Promoter</td> <td>CDM productor</td> <td>Room</td> <td>Event date</td> <td>Event title</td> <td>Creation date</td> </tr> </tbody> </table>

Answer 6

Try this

 $('#waypointsTable tr').mouseOver(function() {
     $(this).style.color = "yellow";
 });

 $('#waypointsTable tr').mouseOut(function() {
     $(this).style.color = <?php echo $status_color; ?>;
 });

W3School Reference