Подсветка строк в таблице по клику
и при наведении курсора мышки
Представляем Вам очень красивый JavaScript код, который осуществляет подсветку строк таблицы, находящихся в данный момент под курсором мышки. При клике по какой-либо строке таблицы, данная строка будет выделена заданным цветом. При повторном клике по выделенной строке, выделение цветом пропадет.
Обратите внимание на таблицу, расположенную чуть ниже. Попробуйте навести на данную таблицу курсор мышки и покликайте по строкам данной таблицы.
| 1) | Значение 1 | Значение 2 |
|---|---|---|
| 2) | Значение 3 | Значение 4 |
| 3) | Значение 5 | Значение 6 |
| 4) | Значение 7 | Значение 8 |
Согласитесь, что данная таблица смотрится довольно таки эффектно. Выделение строк по клику может пригодиться в тех случаях, когда пользователь сравнивает несколько длинных строк в таблице.
Для того чтобы получить подобную таблицу с подсвечивающими строками, для начала вставьте на своем сайте между тегами <head> и </head> следующий код:
<style type="text/css">
#color_table {
border: 1px solid black;
border-collapse: collapse;
margin: 0 auto;
}
table th { background-color: lightblue; }
.hover_Row { background-color: yellow; }
.clicked_Row { background-color: lightgreen; }
</style>Далее в тело странички необходимо добавить JavaScript код, который и будет подсвечивать необходимые строки. Для этого просто скопируйте ниже приведенный код на свою страничку.
<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>Далее в том месте, где должна располагаться Ваша табличка (которую мы будем разукрашивать) создаем таблицу следующим образом:
<table id="color_table">
<tr>
<th style="width: 25px;">1)</th>
<td style="width: 125px;">Значение 1</td><td style="width: 125px;">Значение 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>Далее остается только активировать нашу функцию highlight_Table_Rows (описанную ранее), которая и будет делать всю работу по подсветку строк таблицы. Делается это следующим образом:
<script type="text/javascript">
highlight_Table_Rows("color_table", "hover_Row", "clicked_Row");
</script>В результате у Вас на сайте должна появиться точно такая же табличка с подсвечивающимися строками, как и в нашем примере, показанном выше.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Немного попробовал менять в скрипте для переопределения на td... Не получается :-(
Попробуйте использовать CSS:
<td onmouseout="bgColor=''" onmouseover="bgColor='yellow'">
Сделал все то же самое, но при наведении желтый цвет появляется, но после убирания курсора желтым так и остается.
В результате в строке RegExp("\b"+click_Class+"\b"); был выведен только одинарный слеш вместо двойного.
Код подправил, теперь все работает.
Проблема в том, что таблица уже создана, она динамическая (т.е. можно добавлять новые строки) и стиль для нее задается в отдельных сиэсесках. Сколько не пытался хоть как-то подстроить ваш код под себя, никак не получается. HELP!
Также добавьте в последний JavaScript код строчку с id второй таблицы:
highlight_Table_Rows("color_table_2", "hover_Row", "clicked_Row");
Советую Вам обратить внимание на более продвинутый вариант скрипта подсветки строк в таблице на jQuery.
А можно ли определить какая строка выделена цветом, чтоб данные из этой строки использовать дальше. Я пытался у меня не работает:
var tr2 = document.getElementById('table22').getElementsByTagName('tr'); // Ссылка на ряд в таблице
var td2 = tr2[i].getElementsByTagName('td');
var colortd=td2[i].style.backgroundColor; - это не работает.
Никак не могу определить цвет выделенной строки.
Спасибо заранее .