Question

HI。我想知道每次用户悬停鼠标时如何添加表格行突出显示。我能够成功地交替行颜色。我是网络编程的新手，对javascript知之甚少。请帮我解决这个问题。

以下是代码：

Display.php的：

<table class="table_data">
 <tr>
  <th><nobr>ID</nobr></th>
  <th><nobr>First Names</nobr></th>
  <th><nobr>Gender</nobr></th>
 </tr>

 <?php 
  $row_ctr = 1;

  while ($first_names_array = mysql_fetch_array($first_names)) {
   if (($row_ctr % 2) == 0) $alternate = "even";
   else $alternate = "odd";

   echo "<tr>";
   echo "<td class='$alternate'><nobr>"  .  $first_names_array['id'] . "</nobr></td>";
   echo "<td class='$alternate'><nobr>" . $first_names_array['first_name'] . "</nobr></td>";
   echo "<td class='$alternate'><nobr>" . $first_names_array['gender'] . "</nobr></td>";
   echo "</tr>";

   $row_ctr += 1;
  }
 ?>

 </tr>
</table>

和我的css：

的style.css

.odd {
 background-color: #525252;
}

.even {
 background-color: #B7ACC6;
}

.highlight {
  background-color: #FF0;
}

我不知道如何做到这一点，但正如我所说，行颜色交替是有效的。它只是我遇到麻烦的亮点。像我之前说的那样，我是一个新手。请帮助..

Answer 1

你不需要php或javascript。

你可以通过css：

来做到这一点

.table_data tr:hover{background-color:#000000;} /*highlight with black background*/

Answer 2

为您使用一个类及以下属性

 echo "<tr class='highlightrow'>";
   echo "<td class='$alternate'><nobr>"  .  $first_names_array['id'] . "</nobr></td>";
   echo "<td class='$alternate'><nobr>" . $first_names_array['first_name'] . "</nobr></td>";
   echo "<td class='$alternate'><nobr>" . $first_names_array['gender'] . "</nobr></td>";
   echo "</tr>";

和css for .highlightrow

.highlightrow:hover td
{
  background-color: Black;
  color: white;
  cursor: pointer;
}

Answer 3

要添加对IE的支持，您可以使用jQuery：

$(document).ready(function(){
    $(".table tr").mouseenter(function(){
        $(this).addClass("hover");
    }).mouseleave(function(){
        $(this).removeClass("hover");
    };
});

然后你在CSS中使用这样的东西：

.data_table tr.hover td
{background: #ccc;}

Answer 4

无效的样式代码，用css

执行

使用以下td或tr或table：

onmouseover="style.backgroundColor='#colorcode'

onmouseout="style.backgroundColor='#colorcode'

 - and for alternating table also use css

tr:nth-child(even) {background: #colorcode}
tr:nth-child(odd) {background: #colorcode}

如何在PHP中添加表格突出显示？

4 个答案: