Эффект наведения при jquery не меняется на цвет фона по умолчанию

Question

Проблема: Я хочу добавить эффект наведения в элемент tr, но у меня есть цвет фона, назначенный напрямую из базы данных.Эффект наведения работает с jquery, когда я делаю указатель мыши, цвет меняется, но когда я удаляю мышь, цвет фона не возвращается к предыдущему.

Я знаю, что это не лучший способ добиться этого, если у вас есть идея, пожалуйста, поделитесь ею.

Я уже пытаюсь добавить класс к элементу tr и с помощью css определитьэффект наведения, чтобы изменить цвет фона, но он не работал.

<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

Поскольку ваша переменная является переменной php, вы не можете использовать ее в своем javascript как этот - вместо этого я бы добавил ее к атрибуту данных в строке таблицы, а затем изменил цвет таким образом

Обновление php для включения атрибута данных

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

Обновление js для использования атрибута данных вместо переменной php

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

Я также изменил js наиспользуйте .css вместо замены всего атрибута style (в случае, если что-то еще нужно добавить стили в tr)

Answer 2

TLDR;Зачем использовать JavaScript?

Немного сложно решить эту проблему без публикации каких-либо текущих стилей CSS.Если вы добавили тег «css» к своему вопросу, укажите CSS.

Элемент <tr> является родительским для элемента <td>.Вы можете использовать эффект наведения на <tr> (см. Пример кода), чтобы изменить фон <td>.Поскольку это ребенок, он заполнит пространство соответственно.

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 3

Попробуйте это

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

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

W3School Справочник

Answer 4

Попробуй это.Это должно работать.Также получите status_color в вашем jquery.

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

Answer 5

Попробуйте изменить 'на ":

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

РЕДАКТИРОВАТЬ: я не ожидал, что это был php .. Дух ... .. 1004 *

Удалить' затем:

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

Answer 6

Пожалуйста, попробуйте это

В JavaScript

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

В CSS

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