jquery - 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实现悬停效果

$('#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 而不是替换整个样式属性(以防其他东西需要向 tr 添加样式)