Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Подсветка текста в столбцах таблицы
 
 автор: Margo27   (27.09.2007 в 09:11)   письмо автору
 
 

Привет всем!

Необходимо реализовать следующее:
при наведении курсора на первый столбец таблицы текст в соседнем столбце должен становиться подчеркнутым. Убираем курсор - текст в соседнем столбце вновь нормальный.

Реализация через onmouseover и onmouseout есть, однако при большом количестве строк таблицы скрипт работает медленно: при наведении курсора на первый столбец текст в соседнем столбце становится подчеркнутым через пару секунд.

Ни у кого нет идей, как ускорить скрипт?

С уважением...

   
 
 автор: sim5   (27.09.2007 в 09:26)   письмо автору
 
   для: Margo27   (27.09.2007 в 09:11)
 

Не подчеркивать текст, а изменить цвет фона соседней ячейки, а еще лучше ее бордюр.

   
 
 автор: Margo27   (27.09.2007 в 10:32)   письмо автору
 
   для: sim5   (27.09.2007 в 09:26)
 

Но заказчик хочет именно подчеркивание. Да и в чем, собственно, разница?

   
 
 автор: bronenos   (27.09.2007 в 10:57)   письмо автору
 
   для: Margo27   (27.09.2007 в 10:32)
 

сколько примерно строк в таблице? если много то могу предложить при загрузке страницы поместить ссылки на каждую из них в массив и обращаться к его элементам

   
 
 автор: Margo27   (27.09.2007 в 11:03)   письмо автору
 
   для: bronenos   (27.09.2007 в 10:57)
 

Читала, что вместо onmouseover можно использовать css hover. И это, якобы, ускорит скрипт. Если кто-нибудь реализовывал таким образом - отзовитесь!

   
 
 автор: wawilon   (27.09.2007 в 11:50)   письмо автору
 
   для: Margo27   (27.09.2007 в 11:03)
 


TD
    {
    text-decoration: none;
    }
TD: hover 
    {
    text-decoration: underline;
    }

Попробуй так... Не обещаю что будет работать

   
 
 автор: sim5   (27.09.2007 в 11:58)   письмо автору
 
   для: wawilon   (27.09.2007 в 11:50)
 

И не надо обещать, не будет работать.

   
 
 автор: wawilon   (27.09.2007 в 12:35)   письмо автору
 
   для: 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

   
 
 автор: sim5   (27.09.2007 в 13:21)   письмо автору
 
   для: wawilon   (27.09.2007 в 12:35)
 

Вот именно, для IE псевдокласс hover только для якоря, а в остальном нужен скрипт.

   
 
 автор: Margo27   (27.09.2007 в 13:32)   письмо автору
 
   для: wawilon   (27.09.2007 в 12:35)
 

Друзья!!
Подчеркиваться должна не та ячейка, на которую навели курсор, а та, которая находится в той же строке, но в СОСЕДНЕМ столбце

   
 
 автор: wawilon   (27.09.2007 в 13:33)   письмо автору
 
   для: Margo27   (27.09.2007 в 13:32)
 

Тогда через стили я думаю не получится. Придется использовать onmouseover.

   
 
 автор: sim5   (27.09.2007 в 13:40)   письмо автору
 
   для: Margo27   (27.09.2007 в 13:32)
 

Я бы сделал так - показал заказчику два способа отметки, и объснил бы достоинства и недостки того или иного способа. Вы ведь лучше заказчика соображаете, вам и карты в руки. Заказчик ведь только думает что он прав, ваша задача переубедить его в этом.

   
 
 автор: AlexSol   (27.09.2007 в 13:52)   письмо автору
 
   для: Margo27   (27.09.2007 в 13:32)
 

столбцов скока?

   
 
 автор: Margo27   (27.09.2007 в 14:51)   письмо автору
 
   для: AlexSol   (27.09.2007 в 13:52)
 

два всего столбца, а строк может быть сколько угодно. Пока строк мало - все работает отменно. Как только срок становится много (не могу точную цифру назвать), тормозит

   
 
 автор: AlexSol   (27.09.2007 в 16:59)   письмо автору
 
   для: Margo27   (27.09.2007 в 14:51)
 

вечером напишу.

   
 
 автор: sim5   (27.09.2007 в 10:58)   письмо автору
 
   для: Margo27   (27.09.2007 в 10:32)
 

Ну если текста действительно уйма, то нужно время перебрать его - все что вы видите на странице это рисунок, а его надо перерисовать. Быстрее перерисовать один элемент, чем сотни, отсюда - бордюр будет перерисован гораздо быстрее.

   
 
 автор: RMW   (27.09.2007 в 22:14)   письмо автору
 
   для: Margo27   (27.09.2007 в 09:11)
 

Немного не понял вам нужно чтобы текст становился подчёркнутым в соседней ячейке
этой же строки, или нужно подчёркивать текст во всех ячейках соседнего столбца?
Если что-то не так - приведите пожалуйста ваш код.

   
 
 автор: Margo27   (28.09.2007 в 10:00)   письмо автору
 
   для: RMW   (27.09.2007 в 22:14)
 

Да, именно! Мне нужно, чтобы подчеркивался текст в соседней ячейке ЭТОЙ ЖЕ строки

   
 
 автор: RMW   (28.09.2007 в 12:28)   письмо автору
 
   для: 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>

   
 
 автор: areus   (28.09.2007 в 12:54)   письмо автору
 
   для: Margo27   (27.09.2007 в 09:11)
 

tigir.com там все написано в раздел статьи по этому поводу

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования