Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подсветка выделенной строки в таблице - как сделать в этом случае? (https://javascript.ru/forum/dom-window/3379-podsvetka-vydelennojj-stroki-v-tablice-kak-sdelat-v-ehtom-sluchae.html)

Tend 14.04.2009 03:12

Подсветка выделенной строки в таблице - как сделать в этом случае?
 
Есть код:
<style>
.t td { background-color: #ffddff; }
</style>

<script>
function over(id) { id.style.background = '#ffeeff'; }
function out(id) { id.style.background = '#ffffff'; }
</script>

<table class=t>
<tr onmouseover="over(this);" onmouseout="out(this);">
<td>1234567890</td>
<td>1234567890</td>
<tr onmouseover="over(this);" onmouseout="out(this);">
<td>1234567890</td>
<td>1234567890</td>
</tr>
</table>


Без стиля ".t td { background-color: #ffddff; }" все работает, но этот стиль обязателен.
Как сделать, чтобы и стиль был, и смена подсветки работала?

Gvozd 14.04.2009 08:41

Разобрался.
внутри CSS вы задаете свойство у ячеек, внутри функций вы пытаетесь его переопределитть для всего ряда.ряд и ячейка-немного разные объекты.соответсвенно фоновый цвет ячейки является более приоритетным, потому что ячейка находится поверх объекта ряд
нашел два способа решения вашей проблемы(второй случайно):
1)
<style>
.t td { background-color: #ffddff; }
</style>
 
<script>
function over(id)
	{
	for(i=0;i<id.cells.length;i++)
		id.cells[i].style.backgroundColor = '#ffeeff';
	}
function out(id)
	{
	for(i=0;i<id.cells.length;i++)
		id.cells[i].style.backgroundColor = '#ffffff';
	}
</script>
 
<table class=t>
<tr onmouseover="over(this);" onmouseout="out(this);">
<td>1234567890</td>
<td>1234567890</td>
<tr onmouseover="over(this);" onmouseout="out(this);">
<td>1234567890</td>
<td>1234567890</td>
</tr>
</table>

2)
<style>
.t tr { background-color: #ffddff; }
</style>
 
<script>
function over(id)
	{
	id.style.backgroundColor = '#ffeeff';
	}
function out(id)
	{
	id.style.backgroundColor = '#ffffff';
	}
</script>
 
<table class=t>
<tr onmouseover="over(this);" onmouseout="out(this);">
<td>1234567890</td>
<td>1234567890</td>
<tr onmouseover="over(this);" onmouseout="out(this);">
<td>1234567890</td>
<td>1234567890</td>
</tr>
</table>


PS насчет кросбраузерности ничего не могу сказать. Это не мой конек, к сожалению.но во всех трех моих браузерах все норм(опера, осел, лиса)

Tend 14.04.2009 16:52

Gvozd,
благодарю! :)


Часовой пояс GMT +3, время: 04:31.