Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.09.2011, 17:03
Новичок на форуме
Отправить личное сообщение для vatar Посмотреть профиль Найти все сообщения от vatar
 
Регистрация: 28.09.2011
Сообщений: 6

Свойство display: none для строк в таблице под IE8
Тут несколько раз проскакивали темы, что имеются проблемы со свойством display: table-row или none.
Интересной наблюдение: свойство прописанное в CSS и прямо в теге ведут себя по разному в IE.
Подробнее. Есть таблица, в которой из нескольких строк должна показываться только 1, в зависимоси от radio-button.
Все строки выводятся с display: none, а потом одна из них js-функцией устанавливается в display: table-row.
(Кривовато написано, но смысл, я надеюсь, понятен).
Так вот если написать
<tr ... class='invisible'>
а в CSS написать
.invisible { display: none; }
то в IE8 строки так и не появляются
( после document.getElementById(new_tr_id).style.display = "table-row"; )
а если написать
<tr ... style="display: none;">
то все работает.
Почему не работает - не понимаю.
PS. в остальных доступных браузерах работает всегда.
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2011, 09:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от vatar
в IE8 строки так и не появляются
( после document.getElementById(new_tr_id).style.display = "table-row"; )
А если так?

document.getElementById('new_tr_id').style.display = ""
Ответить с цитированием
  #3 (permalink)  
Старый 29.09.2011, 12:44
Новичок на форуме
Отправить личное сообщение для vatar Посмотреть профиль Найти все сообщения от vatar
 
Регистрация: 28.09.2011
Сообщений: 6

Просто тест - встроенный стиль vs глобальный
Сделал просто тест.
Так - работает:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
var old_tr_id = 'r0';
function src_select(new_tr_id)
{
if (new_tr_id != 'r0')
{
document.getElementById(new_tr_id).style.display = "table-row";
}
if (old_tr_id != 'r0')
{
document.getElementById(old_tr_id).style.display = "none";
}
old_tr_id = new_tr_id;
}
</script>
</head>

<body>
<table>
<tr><td>Radio</td><td>
<input type=radio id=rb name=rb value='r1' onclick="src_select(this.value)">1
<input type=radio id=rb name=rb value='r2' onclick="src_select(this.value)">2
<input type=radio id=rb name=rb value='r3' onclick="src_select(this.value)">3
<input type=radio id=rb name=rb value='r0' onclick="src_select(this.value)" checked>0
</td></tr>
<tr id=r1 style="display: none;"><td>1</td></tr>
<tr id=r2 style="display: none;"><td>2</td></tr>
<tr id=r3 style="display: none;"><td>3</td></tr>
</table>
</body>
</html>
--------------------------------------
А так - не работает.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.inv
{
display: none;
}
</style>
<script type="text/javascript">
var old_tr_id = 'r0';
function src_select(new_tr_id)
{
if (new_tr_id != 'r0')
{
document.getElementById(new_tr_id).style.display = "table-row";
}
if (old_tr_id != 'r0')
{
document.getElementById(old_tr_id).style.display = "none";
}
old_tr_id = new_tr_id;
}
</script>
</head>

<body>
<table>
<tr><td>Radio</td><td>
<input type=radio id=rb name=rb value='r1' onclick="src_select(this.value)">1
<input type=radio id=rb name=rb value='r2' onclick="src_select(this.value)">2
<input type=radio id=rb name=rb value='r3' onclick="src_select(this.value)">3
<input type=radio id=rb name=rb value='r0' onclick="src_select(this.value)" checked>0
</td></tr>
<tr id=r1 class=inv><td>1</td></tr>
<tr id=r2 class=inv><td>2</td></tr>
<tr id=r3 class=inv><td>3</td></tr>
</table>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2011, 12:49
Новичок на форуме
Отправить личное сообщение для vatar Посмотреть профиль Найти все сообщения от vatar
 
Регистрация: 28.09.2011
Сообщений: 6

table-row & IE
table-row IE понимает.
Если изначально задать 'table-row' вместо 'none', то потом (после полного круга щелкания по кновке) все начинает работать.
Ответить с цитированием
  #5 (permalink)  
Старый 29.09.2011, 12:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от vatar
А так - не работает.
У меня в ИЕ8 работает...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
.inv {
	display: none;
}
</style>
<script type="text/javascript">
var old_tr_id = 'r0';
function src_select(new_tr_id) {
	if (new_tr_id != 'r0') {
		document.getElementById(new_tr_id).style.display = "table-row";
		alert('показал '+new_tr_id)
	}
	if (old_tr_id != 'r0') {
		document.getElementById(old_tr_id).style.display = "none";
		alert('спрятал '+old_tr_id)
	}
	old_tr_id = new_tr_id;
}
</script>
</head>
<body>
<table>
	<tr>
		<td>Radio</td>
		<td>
			<input type=radio name=rb value='r1' onclick="src_select(this.value)">1
			<input type=radio name=rb value='r2' onclick="src_select(this.value)">2
			<input type=radio name=rb value='r3' onclick="src_select(this.value)">3
			<input type=radio name=rb value='r0' onclick="src_select(this.value)" checked>0
		</td>
	</tr>
	<tr id=r1 class=inv><td>1</td></tr>
	<tr id=r2 class=inv><td>2</td></tr>
	<tr id=r3 class=inv><td>3</td></tr>
</table>
</body>
</html>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 29.09.2011, 13:05
Новичок на форуме
Отправить личное сообщение для vatar Посмотреть профиль Найти все сообщения от vatar
 
Регистрация: 28.09.2011
Сообщений: 6

Ну, не знаю что и сказать. У меня IE ни с глобальным стилем (как здесь), ни через файл не работает. А SeaMonkey, Chrome и Opera - работают.
Может, какого-нибудь update не хватает (или наоборот, лишний)...
Ответить с цитированием
  #7 (permalink)  
Старый 29.09.2011, 13:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от vatar
У меня IE ни с глобальным стилем (как здесь), ни через файл не работает.
Так мой пример у тебя работает? Какой у тебя ИЕ?
Ответить с цитированием
  #8 (permalink)  
Старый 29.09.2011, 14:34
Новичок на форуме
Отправить личное сообщение для vatar Посмотреть профиль Найти все сообщения от vatar
 
Регистрация: 28.09.2011
Сообщений: 6

Пример работает.
Но при копировании ко мне на сервер - уже нет.
IE 8.0.6001.19702
Ответить с цитированием
  #9 (permalink)  
Старый 29.09.2011, 14:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от vatar
при копировании ко мне на сервер - уже нет
Сервер заколдован...
Ответить с цитированием
  #10 (permalink)  
Старый 29.09.2011, 14:47
Новичок на форуме
Отправить личное сообщение для vatar Посмотреть профиль Найти все сообщения от vatar
 
Регистрация: 28.09.2011
Сообщений: 6

Дело все-таки в
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
:-(
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Под IE8 задизейблена кнопка, а под Mozilla нет Svetich Internet Explorer 2 05.07.2011 10:03
Возможно ли использование "горячих" клавиш для навигации по таблице? sergeos jQuery 9 16.07.2010 13:43
Автосорировка строк в таблице Bulletprof Общие вопросы Javascript 2 20.06.2010 00:37
Разварачивание строк в таблице на jQyery Suharik jQuery 49 07.05.2010 11:20
Использование css свойства display для подменю Lex4e Общие вопросы Javascript 7 07.01.2010 22:02