ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / На SAFARI для строк в программно сформированной таблице hover странно работает.
8 сообщений из 8, страница 1 из 1
На SAFARI для строк в программно сформированной таблице hover странно работает.
    #39386113
Фотография Vakho
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vakho
Участник
Windows XP PRO SP3

Программно формируется таблица. В процессе формирования каждой строке
устанавливается атрибут class со значением trHover:

Код: css
1.
.trHover:hover {cursor: pointer;  background-color: blue;  color: white;}



На прикрепленном рисунке видно, что для MOZILLA, OPERA и CHROME hover работает
"нормально" - закрашивается только задний фон текста. На Safari (5.1.7) вся строка закрашивается белым цветом (цвет букв ? Надо проверить).
И ещё момент: для таблицы, созданной вручную, class = 'trHover' во всех указанных
броузерах работает идеально. Подскажите, пожалуйста, что не так.

Фрагмент программы
--------------------
Код: javascript
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.
    table = document.createElement("TABLE");
    table.id = idTABLE;
    table.setAttribute('cellpadding', '0');
    table.setAttribute('cellspacing', '0');
    table.setAttribute('class', myClass);

    tbody = document.createElement("TBODY");

    for (i = 0; i < jsonTABLE.length; i++) {
      row = document.createElement("ROW");
      row.setAttribute('onclick', 'MyEventHandler();');
      row.setAttribute('class', 'trHover'); // trHover - см. выше.
 
      row.id = myId[i];
     //-------------------------------------------------------
      td = document.createElement("TD");

      td.style.width = width1;
      td.style.paddingBottom = paddingBottom1;
      td.style.paddingTop = paddingTop1;
      td.style.paddingLeft = paddingLeft1;
      td.style.borderBottom = borderBottom1;
      td.style.borderRight = borderRight1;

      td.innerHTML = myHTML1;
      row.appendChild(td); // Добавление к строке ячейки.
     //-------------------------------------------------------
      td = document.createElement("TD");

      td.style.width = width2;
      td.style.paddingLeft = paddingLeft2;
      td.style.borderBottom = borderBottom2;
      td.style.borderRight = borderRight2;

      td.innerHTML = myHTML2;
      row.appendChild(td); // Добавление к строке ячейки.
      //-------------------------------------------------------
             И так далее...
      //-------------------------------------------------------

      tbody.appendChild(row);
    } // i = i + 1

    table.appendChild(tbody);
    document.getElementById(idDivAREA).appendChild(table);
...
Рейтинг: 0 / 0
17.01.2017, 14:43
| Ответить | Цитировать | Написать  
На SAFARI для строк в программно сформированной таблице hover странно работает.
    #39386114
Фотография Vakho
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vakho
Участник
Рисунок
...
Рейтинг: 0 / 0
17.01.2017, 14:44
| Ответить | Цитировать | Написать  
На SAFARI для строк в программно сформированной таблице hover странно работает.
    #39386127
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Vakho,

попробуйте содержимое таблицы сделать не через createElement ('TBODY'/'ROW'/'TD'), а через insertRow и insertCell
 
Пример
Код: 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.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Добавить/Удалить столбцы</title>
<style>
table {
	font:15px arial,sans-serif;
	border-collapse:collapse;
	margin-bottom:10px;
}
td {
	border:1px solid #aaa;
	padding:4px;
}
button {margin:2px;}
</style>
</head>
<body>
<table id="myTable">
	<tr> <td>cell 1_1</td> <td>cell 1_2</td> </tr>
	<tr> <td>cell 2_1</td> <td>cell 2_2</td> </tr>
	<tr> <td>cell 3_1</td> <td>cell 2_3</td> </tr>
	<tr> <td>cell 4_1</td> <td>cell 2_4</td> </tr>
</table>
<button type="button" onclick="AddRowTop()">Вставить строку на самый верх таблицы</button>
<button type="button" onclick="AddRowBottom()">Вставить строку в самый низ таблицы</button>
<br>
<button type="button" onclick="AddColumnLeft()">Добавить колонку в начало таблицы</button>
<button type="button" onclick="AddColumnRight()">Добавить колонку в конец таблицы</button>

<script>
function gid(i) {return document.getElementById(i);}

function AddRowTop() {
	var el = gid('myTable');
	var cols_cnt = el.rows[0].cells.length;
	var row = el.insertRow(0), i = 0;

	for (i=0; i < cols_cnt; i++) {
		var NewCell = row.insertCell(-1);
		NewCell.innerHTML = 'Text on top ' + (i+1).toString();
	}
}

function AddRowBottom() {
	var el = gid('myTable'), i = 0;
	var cols_cnt = el.rows[el.rows.length-1].cells.length;
	var row = el.insertRow(-1);

	for (i=0; i < cols_cnt; i++) {
		var NewCell = row.insertCell(-1);
		NewCell.innerHTML = 'Text on bottom ' + (i+1).toString();
	}
}

function AddColumnLeft() {
	var el = gid('myTable');
	var rows_cnt = el.rows.length;
	var cols_cnt = el.rows[0].cells.length;
	var cell, i = 0;

	for (i=0; i < rows_cnt; i++) {
		cell = el.rows[i].insertCell(0);
		cell.innerHTML = Math.floor(Math.random()*10000);
	}
}

function AddColumnRight() {
	var el = gid('myTable');
	var rows_cnt = el.rows.length;
	var cols_cnt = el.rows[0].cells.length;
	var cell, i = 0;

	for (i=0; i < rows_cnt; i++) {
		cell = el.rows[i].insertCell(-1);
		cell.innerHTML = Math.floor(Math.random()*10000);
	}
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
17.01.2017, 15:03
| Ответить | Цитировать | Написать  
На SAFARI для строк в программно сформированной таблице hover странно работает.
    #39386162
Фотография Vakho
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vakho
Участник
user89,

Все заработало !
Спасибо огромное !
...
Рейтинг: 0 / 0
17.01.2017, 15:43
| Ответить | Цитировать | Написать  
На SAFARI для строк в программно сформированной таблице hover странно работает.
    #39386164
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
Vakho,

У tr в общем нет свойств, которые вы от него хотите, думаю сафари понравится так
Код: css
1.
.trHover:hover td {cursor: pointer;  background-color: blue;  color: white;}
...
Рейтинг: 0 / 0
17.01.2017, 15:43
| Ответить | Цитировать | Написать  
На SAFARI для строк в программно сформированной таблице hover странно работает.
    #39386170
Фотография Vakho
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vakho
Участник
mage.lan,

Я заменил createElemet на insertRow и insertCell при прочих равных условиях, и все
заработало.

Но все равно спасибо.
...
Рейтинг: 0 / 0
17.01.2017, 15:51
| Ответить | Цитировать | Написать  
На SAFARI для строк в программно сформированной таблице hover странно работает.
    #39386451
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Тshаmil
Участник
Windows XP PRO SP3 + safari крутая смесь, если учитывать что сафари в виндовз больше трех лет не поддерживается и не обновляется:)
...
Рейтинг: 0 / 0
17.01.2017, 22:26
| Ответить | Цитировать | Написать  
На SAFARI для строк в программно сформированной таблице hover странно работает.
    #39386468
sxq
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sxq
Участник
на дворе 10-я версия сафари, вы еще для IE 6/7 сделайте все это
...
Рейтинг: 0 / 0
17.01.2017, 22:48
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / На SAFARI для строк в программно сформированной таблице hover странно работает.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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