|
|
|
| Привет всем!
Необходимо реализовать следующее:
при наведении курсора на первый столбец таблицы текст в соседнем столбце должен становиться подчеркнутым. Убираем курсор - текст в соседнем столбце вновь нормальный.
Реализация через onmouseover и onmouseout есть, однако при большом количестве строк таблицы скрипт работает медленно: при наведении курсора на первый столбец текст в соседнем столбце становится подчеркнутым через пару секунд.
Ни у кого нет идей, как ускорить скрипт?
С уважением... | |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 09:11)
| | Не подчеркивать текст, а изменить цвет фона соседней ячейки, а еще лучше ее бордюр. | |
|
|
|
|
|
|
|
для: sim5
(27.09.2007 в 09:26)
| | Но заказчик хочет именно подчеркивание. Да и в чем, собственно, разница? | |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 10:32)
| | сколько примерно строк в таблице? если много то могу предложить при загрузке страницы поместить ссылки на каждую из них в массив и обращаться к его элементам | |
|
|
|
|
|
|
|
для: bronenos
(27.09.2007 в 10:57)
| | Читала, что вместо onmouseover можно использовать css hover. И это, якобы, ускорит скрипт. Если кто-нибудь реализовывал таким образом - отзовитесь! | |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 11:03)
| |
TD
{
text-decoration: none;
}
TD: hover
{
text-decoration: underline;
}
|
Попробуй так... Не обещаю что будет работать | |
|
|
|
|
|
|
|
для: wawilon
(27.09.2007 в 11:50)
| | И не надо обещать, не будет работать. | |
|
|
|
|
|
|
|
для: sim5
(27.09.2007 в 11:58)
| |
<style>
td
{
text-decoration: none;
}
td:hover
{
text-decoration: underline;
}
</style>
|
Сейчас попробовал. Получилось. Только проблема в том, что подчеркивается не весь столбец, а только клетка на которую на вели. Проблема решается следующим способом (может будет не уместным для ситуации автора, но все же...)
<table>
<tr>
<td>
<table>
<tr><td>text1</td></tr>
<tr><td>text2</td></tr>
</table>
</td>
<td>
<table>
<tr><td>text3</td></tr>
<tr><td>text4</td></tr>
</table>
</td>
</tr>
</table>
|
То есть получается делаем таблицу высотой в одну строку, а в каждой ячейке делаем таблицы нужной нам высоты и при наведении будет выделяться (подчеркиваться) вся эта таблица, то есть весь столбец.
P.S. Тестировалось только на браузере Mozilla Firefox.
P.P.S. Вот нашел полезную библиотеку, которая эмулирует hover для IE. Вы задаете стилевое правило hover как обычно, а на самом деле срабатывает java-скрипт. И не надо писать всякие onmouseover - удобно.
http://www.xs4all.nl/~peterned/csshover.html | |
|
|
|
|
|
|
|
для: wawilon
(27.09.2007 в 12:35)
| | Вот именно, для IE псевдокласс hover только для якоря, а в остальном нужен скрипт. | |
|
|
|
|
|
|
|
для: wawilon
(27.09.2007 в 12:35)
| | Друзья!!
Подчеркиваться должна не та ячейка, на которую навели курсор, а та, которая находится в той же строке, но в СОСЕДНЕМ столбце | |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 13:32)
| | Тогда через стили я думаю не получится. Придется использовать onmouseover. | |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 13:32)
| | Я бы сделал так - показал заказчику два способа отметки, и объснил бы достоинства и недостки того или иного способа. Вы ведь лучше заказчика соображаете, вам и карты в руки. Заказчик ведь только думает что он прав, ваша задача переубедить его в этом. | |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 13:32)
| | столбцов скока? | |
|
|
|
|
|
|
|
для: AlexSol
(27.09.2007 в 13:52)
| | два всего столбца, а строк может быть сколько угодно. Пока строк мало - все работает отменно. Как только срок становится много (не могу точную цифру назвать), тормозит | |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 14:51)
| | вечером напишу. | |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 10:32)
| | Ну если текста действительно уйма, то нужно время перебрать его - все что вы видите на странице это рисунок, а его надо перерисовать. Быстрее перерисовать один элемент, чем сотни, отсюда - бордюр будет перерисован гораздо быстрее. | |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 09:11)
| | Немного не понял вам нужно чтобы текст становился подчёркнутым в соседней ячейке
этой же строки, или нужно подчёркивать текст во всех ячейках соседнего столбца?
Если что-то не так - приведите пожалуйста ваш код. | |
|
|
|
|
|
|
|
для: RMW
(27.09.2007 в 22:14)
| | Да, именно! Мне нужно, чтобы подчеркивался текст в соседней ячейке ЭТОЙ ЖЕ строки | |
|
|
|
|
|
|
|
для: Margo27
(28.09.2007 в 10:00)
| | В таком случае интересно как же это нужно так извратиться,
чтобы получить такие тормоза?)))
Попробуйте такой код, вроде от кол-ва строк в таблице не зависит.
<html>
<script>
onload = function()
{
if(document.addEventListener)
{
document.getElementById('myTable').addEventListener('mouseover',function(e){if(e.target.nextSibling)e.target.nextSibling.style.textDecoration='underline'},false);
document.getElementById('myTable').addEventListener('mouseout',function(e){if(e.target.nextSibling)e.target.nextSibling.style.textDecoration='none'},false);
}
else if(document.attachEvent)
{
document.getElementById('myTable').attachEvent('onmouseover',function(){if(event.srcElement.nextSibling)event.srcElement.nextSibling.style.textDecoration='underline'});
document.getElementById('myTable').attachEvent('onmouseout',function(){if(event.srcElement.nextSibling)event.srcElement.nextSibling.style.textDecoration='none'});
}
}
</script>
<table id="myTable" border="1">
<tr>
<td>***</td><td>text</td>
</tr>
</table>
</html>
|
| |
|
|
|
|
|
|
|
для: Margo27
(27.09.2007 в 09:11)
| | tigir.com там все написано в раздел статьи по этому поводу | |
|
|
|