ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выделение ячейки на пересечении строки и столбца
25 сообщений из 29, страница 1 из 2
  1  все
Выделение ячейки на пересечении строки и столбца
    #38055207
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
Здравствуйте, уважаемые участники форума!

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

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
<!DOCTYPE html>
<html>

<head>

<style>
tr:hover {background:gold;}
table{table-layout:fixed;}
td{background:silver;font-size:17px;}
td:hover {background:red;}
tr{background:silver;}
tr:hover {background:green;}
#sel:hover{background:yellow;}
#sel_b:hover{background:green;color:white;}
#sel_blue:hover{background:blue;color:white;}
#sel_darkblue:hover{background:darkblue;color:white;}
</style>

</head>

<body>
<table width=200 cellpadding=5>
<tr><td id=seldarkblue  style="width:130px;height:30px;">aasdasdadasda</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td id=seldarkblue  >a</td><td id=sel_blue>b</td><td>c</td><td>d</td></tr>
<tr><td id=>a</td><td>b</td><td id=sel_b>c</td><td>d</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
</table>
</div>
</body>

</html>
...
Рейтинг: 0 / 0
27.11.2012, 16:58
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38055238
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Для начала нужно код писать без синтаксических ошибок. Существует же дохрена редакторов, способных контролировать синтаксис.

id=seldarkblue присутствует 2 раза, <td id=> вообще неизвестно во что превратится.
...
Рейтинг: 0 / 0
27.11.2012, 17:06
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056334
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
AntonariyДля начала нужно код писать без синтаксических ошибок. Существует же дохрена редакторов, способных контролировать синтаксис.

id=seldarkblue присутствует 2 раза, <td id=> вообще неизвестно во что превратится.

Здесь, в принципе, дополнительные классы стилей не имеют значения. Нужна просто подстветка <tr>,<th> и <td>
...
Рейтинг: 0 / 0
28.11.2012, 14:17
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056363
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Ответ на вопросПодскажите, пожалуйста, что я делаю не так в данном случаезвучит следующим образом: вы не так создаете тестовые примеры.

Сделайте пример только с тем, что имеет значение. И без синтаксических и структурных ошибок.
...
Рейтинг: 0 / 0
28.11.2012, 14:26
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056366
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
TABLERНо я не могу выделить даже строку и находящуюся на ней ячейку при наведении.
С этим-то проблем нет...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
tr:hover {
	background-color: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table width=200 cellpadding=5>
	<tr><td style="width:130px;height:30px;">aasdasdadasda</td><td>b</td><td>c</td><td>d</td></tr>
	<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
	<tr><td>a</td><td>b</td><td id=sel_b>c</td><td>d</td></tr>
	<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
</table>
</body>
</html>



А вот колонку нужно уже скрипт писать...
...
Рейтинг: 0 / 0
28.11.2012, 14:27
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056516
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
krvsa
У Вас выделяется вся строка, а нужно, чтобы выделялась и строка и ячейка разными цветами. Скажем красная ячейка на желтой строке. Такую задачку решить можно?
...
Рейтинг: 0 / 0
28.11.2012, 15:31
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056551
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
TABLERТакую задачку решить можно?
Да.
По аналогии...
...
Рейтинг: 0 / 0
28.11.2012, 15:48
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056595
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
krvsaTABLERТакую задачку решить можно?
Да.
По аналогии...

Странно, но такая аналогия

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<style type="text/css">
tr:hover {
	background-color: yellow;
}
td:hover {
	background-color: yellow;
}
</style>



не работает (( Строка выделяется, а ячейка на ней никак .... или Вы имели ввиду что-то другое?
...
Рейтинг: 0 / 0
28.11.2012, 16:15
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056601
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
Опечатался )) естесственно, с разными цветами
...
Рейтинг: 0 / 0
28.11.2012, 16:16
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056606
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
Извините, ошибся, все пркрасно работает )) А со столбцом можно что-нибудь придумать?
...
Рейтинг: 0 / 0
28.11.2012, 16:18
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056608
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
TABLERА со столбцом можно что-нибудь придумать?
Скриптом онли...
...
Рейтинг: 0 / 0
28.11.2012, 16:18
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056617
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
krvsaTABLERА со столбцом можно что-нибудь придумать?
Скриптом онли...

То есть надо у каждой ячейки каждого столбца ставить ID и потом как-то к ним обращаться изменяя класс по наведению? Могу я передать в скрипт именно идентификатор столбца? This в этом случае что будет передавать, ячейку?
...
Рейтинг: 0 / 0
28.11.2012, 16:22
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056637
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
TABLERТо есть надо у каждой ячейки каждого столбца ставить ID
Это не обязательно...

TABLERМогу я передать в скрипт именно идентификатор столбца?
Ты можешь передавать в скрипт все, что тебе захочется.

TABLERThis в этом случае что будет передавать, ячейку?
Сылку на объект ДОМ.
...
Рейтинг: 0 / 0
28.11.2012, 16:36
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056679
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
А приблизительную логику не подскажете (для организации по модели DOM) ?
...
Рейтинг: 0 / 0
28.11.2012, 16:52
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056908
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<!DOCTYPE html>
<html>  
<head>
  <style type="text/css">
    tr:hover {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <table width="200" cellpadding="5">
    <tr>
      <td class="first">a</td>
      <td class="second">b</td>
      <td class="third">c</td>
      <td class="fourth">d</td>
    </tr>
    <tr>
      <td class="first">a</td>
      <td class="second">b</td>
      <td class="third">c</td>
      <td class="fourth">d</td>
    </tr>
    <tr>
      <td class="first">a</td>
      <td class="second">b</td>
      <td class="third">c</td>
      <td class="fourth">d</td>
    </tr>
    <tr>
      <td class="first">a</td>
      <td class="second">b</td>
      <td class="third">c</td>
      <td class="fourth">d</td>
    </tr>
  </table>
  <script>
    var table = document.body.children[0];
      
    table.onmouseover = function(e) {
      e = e || window.event;
        
      var cell, i, target = e.target || e.srcElement;
        
      if (target.tagName == 'TD') {
        var cells = this.getElementsByTagName('TD');
          
        for (i = 0; i < cells.length; i++) {
          cell = cells[i];
            
          if (cell == target) {
          	cell.style.backgroundColor = 'green';
          } else {
            cell.style.backgroundColor = target.className == cell.className ? 'yellow' : 'transparent';
          }
        }
      }
    };
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
28.11.2012, 18:42
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38056948
Фотография Малыхин Сергей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Малыхин Сергей
Участник
http://css-tricks.com/examples/RowColumnHighlighting/example-one.php
...
Рейтинг: 0 / 0
28.11.2012, 19:21
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38057386
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
skyANA
Код: html
1.
2.
3.
4.
<!DOCTYPE html>
<html>  
<head>
 ......



О, круто! Спасибо, но одно НО: при работе скрипта не обрабатывается псевдокласс hover для <tr>. То есть колонка выделяется, а строчка нет. Можно, наверное, как-то по аналогии скриптом и строчку подсвечивать?
...
Рейтинг: 0 / 0
29.11.2012, 09:29
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38057506
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
TABLERskyANA
Код: html
1.
2.
3.
4.
<!DOCTYPE html>
<html>  
<head>
 ......



О, круто! Спасибо, но одно НО: при работе скрипта не обрабатывается псевдокласс hover для <tr>. То есть колонка выделяется, а строчка нет. Можно, наверное, как-то по аналогии скриптом и строчку подсвечивать?Что за браузер, какой версии?
...
Рейтинг: 0 / 0
29.11.2012, 11:15
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38057860
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
TABLERМожно, наверное, как-то по аналогии скриптом и строчку подсвечивать?
Зачем строку подсвечивать скриптом?
Я тебе уже показал как все это делается с помощью ЦСС...
...
Рейтинг: 0 / 0
29.11.2012, 13:34
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38057867
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
krvsaTABLERМожно, наверное, как-то по аналогии скриптом и строчку подсвечивать?
Зачем строку подсвечивать скриптом?
Я тебе уже показал как все это делается с помощью ЦСС...

Вы же видите, что со скриптом это не работает
...
Рейтинг: 0 / 0
29.11.2012, 13:37
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38057869
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
skyANATABLERпропущено...


О, круто! Спасибо, но одно НО: при работе скрипта не обрабатывается псевдокласс hover для <tr>. То есть колонка выделяется, а строчка нет. Можно, наверное, как-то по аналогии скриптом и строчку подсвечивать?Что за браузер, какой версии?

IE 7
...
Рейтинг: 0 / 0
29.11.2012, 13:38
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38057942
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
TABLERВы же видите, что со скриптом это не работает
Я не смотрел тот скрипт...
...
Рейтинг: 0 / 0
29.11.2012, 14:02
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38059190
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
krvsaTABLERВы же видите, что со скриптом это не работает
Я не смотрел тот скрипт...

Посмотрите, пожалуйста. Получается, что либо работает скрипт, либо стили.
Есть решения на JQuery, но тянуть весь этот хлам из фреймворка ради 1-2 функций на javascript не хотелось бы.
...
Рейтинг: 0 / 0
30.11.2012, 08:20
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38059318
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
<!DOCTYPE html>
<html>  
<head></head>
<body>
  <table width="200" cellpadding="5">
    <tr>
      <td class="first">a</td><td class="second">b</td>
      <td class="third">c</td><td class="fourth">d</td>
    </tr>
    <tr>
      <td class="first">a</td><td class="second">b</td>
      <td class="third">c</td><td class="fourth">d</td>
    </tr>
    <tr>
      <td class="first">a</td><td class="second">b</td>
      <td class="third">c</td><td class="fourth">d</td>
    </tr>
    <tr>
      <td class="first">a</td><td class="second">b</td>
      <td class="third">c</td><td class="fourth">d</td>
    </tr>
  </table>
  <script>
    var table = document.body.children[0];
      
    table.onmouseover = function(e) {
      e = e || window.event;
        
      var cell, cells, i, row,
          target = e.target || e.srcElement;
        
      if (target.tagName == 'TD') {
        cells = this.getElementsByTagName('TD');
          
        for (i = 0; i < cells.length; i++) {
          cell = cells[i];
          row = cell.parentNode;
            
          if (cell == target) {
          	cell.style.backgroundColor = 'green';
          } else {            
            cell.style.backgroundColor = cell.className == target.className ? 'yellow' : 'transparent';
          }
          
          if (row == target.parentNode) {
          	row.style.backgroundColor = 'yellow';
          } else {
          	row.style.backgroundColor = 'transparent';            
          }
        }
      }
    };
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
30.11.2012, 10:36
| Ответить | Цитировать | Написать  
Выделение ячейки на пересечении строки и столбца
    #38059952
TABLER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TABLER
Гость
Изменения увидел, но почему-то по - прежнему выделяется только столбец (( (IE7)
...
Рейтинг: 0 / 0
30.11.2012, 15:33
| Ответить | Цитировать | Написать  
25 сообщений из 29, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выделение ячейки на пересечении строки и столбца
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38056363&tid=1449020]:
 0ms
get settings:
 9ms
get forum list:
 16ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 174ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 53ms
get tp. blocked users:
 1ms
others: 204ms
total:  474ms
созд. / загр.: 474ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]