Блог

привет. Я хочу знать, как добавить подсветку строки таблицы каждый раз, когда пользователь наводит курсор мыши. Я смог успешно чередовать цвет строки. Я абсолютный новичок в веб-программировании и очень мало знаю о 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;
}
  

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

Вам не нужен php или javascript.

Вы можете сделать это с помощью css:

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

Используйте класс для вас tr и следующие свойства

  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 для .highlightrow

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

Чтобы добавить поддержку 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;}
  

удалите избыточный код для стилизации, сделайте это с помощью css

используйте следующее с td или tr или таблицей:

 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}