Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / На SAFARI для строк в программно сформированной таблице hover странно работает. / 8 сообщений из 8, страница 1 из 1
17.01.2017, 14:43
    #39386113
Vakho
Vakho
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
На SAFARI для строк в программно сформированной таблице hover странно работает.
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:44
    #39386114
Vakho
Vakho
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
На SAFARI для строк в программно сформированной таблице hover странно работает.
Рисунок
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.01.2017, 15:03
    #39386127
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
На SAFARI для строк в программно сформированной таблице hover странно работает.
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:43
    #39386162
Vakho
Vakho
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
На SAFARI для строк в программно сформированной таблице hover странно работает.
user89,

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

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

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

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


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