Подсветка и выделение строки в таблице при наведении и клике – JS

Обновлено: 23 декабря, 2021

Следующий код выводит таблицу, в которой при наведении на строки – фон строки меняется на желтый, а при клике на строке – фон меняется на зеленый.

Код

<style type="text/css">
  table th {background-color: lightblue;}
  .hover_Row { background-color: yellow; }
  .clicked_Row { background-color: lightgreen; }
</style>
<script type="text/javascript">
function highlight_Table_Rows(table_Id, hover_Class, click_Class, multiple) {
var table = document.getElementById(table_Id);
if (typeof multiple == 'undefined') multiple = true;

if (hover_Class) {
 var hover_Class_Reg = new RegExp("\\b"+hover_Class+"\\b");
 table.onmouseover = table.onmouseout = function(e) {
  if (!e) e = window.event;
  var elem = e.target || e.srcElement;
  while (!elem.tagName || !elem.tagName.match(/td|th|table/i))
   elem = elem.parentNode;

  if (elem.parentNode.tagName == 'TR' &&
   elem.parentNode.parentNode.tagName == 'TBODY') {
   var row = elem.parentNode;
   if (!row.getAttribute('clicked_Row'))
   row.className = e.type=="mouseover"?row.className +
   " " + hover_Class:row.className.replace(hover_Class_Reg," ");
  }
 };
}

if (click_Class) table.onclick = function(e) {
 if (!e) e = window.event;
 var elem = e.target || e.srcElement;
 while (!elem.tagName || !elem.tagName.match(/td|th|table/i))
  elem = elem.parentNode;

 if (elem.parentNode.tagName == 'TR' &&
  elem.parentNode.parentNode.tagName == 'TBODY') {
  var click_Class_Reg = new RegExp("\\b"+click_Class+"\\b");
  var row = elem.parentNode;

  if (row.getAttribute('clicked_Row')) {
   row.removeAttribute('clicked_Row');
   row.className = row.className.replace(click_Class_Reg, "");
   row.className += " "+hover_Class;
  }
  else {
   if (hover_Class) row.className = row.className.replace(hover_Class_Reg, "");
   row.className += " "+click_Class;
   row.setAttribute('clicked_Row', true);

  if (!multiple) {
   var lastRowI = table.getAttribute("last_Clicked_Row");
   if (lastRowI!==null && lastRowI!=='' && row.sectionRowIndex!=lastRowI) {
    var lastRow = table.tBodies[0].rows[lastRowI];
    lastRow.className = lastRow.className.replace(click_Class_Reg, "");
    lastRow.removeAttribute('clicked_Row');
   }
  }
  table.setAttribute("last_Clicked_Row", row.sectionRowIndex);
  }
 }
};
}
</script>
<div align="center">
<table id="color_table" border="1" style="border: 1px solid black;
 border-collapse: collapse;">
<tr>
  <th width="20">1)</th>
  <td width="120">Значение 1</td><td width="120">Значение 2</td>
</tr>
<tr>
  <th>2)</th><td>Значение 3</td><td>Значение 4</td>
</tr>
<tr>
  <th>3)</th><td>Значение 5</td><td>Значение 6</td>
</tr>
<tr>
  <th>4)</th><td>Значение 7</td><td>Значение 8</td>
</tr>
</table>
</div>
<script type="text/javascript">
 highlight_Table_Rows("color_table", "hover_Row", "clicked_Row");
</script>

Пример данной реализации можно посмотреть и скачать здесь

(7 оценок, среднее: 4,86 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.

Загрузка...