Форум

vatar · #1 (**permalink**) 28.09.2011, 17:03

Тут несколько раз проскакивали темы, что имеются проблемы со свойством 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. в остальных доступных браузерах работает всегда.

ksa · #2 (**permalink**) 29.09.2011, 09:42

Сообщение от vatar

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

А если так?

document.getElementById('new_tr_id').style.display = ""

vatar · #3 (**permalink**) 29.09.2011, 12:44

Сделал просто тест.
Так - работает:
<!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>

vatar · #4 (**permalink**) 29.09.2011, 12:49

table-row IE понимает.
Если изначально задать 'table-row' вместо 'none', то потом (после полного круга щелкания по кновке) все начинает работать.

ksa · #5 (**permalink**) 29.09.2011, 12:57

Сообщение от 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>

vatar · #6 (**permalink**) 29.09.2011, 13:05

Ну, не знаю что и сказать. У меня IE ни с глобальным стилем (как здесь), ни через файл не работает. А SeaMonkey, Chrome и Opera - работают.
Может, какого-нибудь update не хватает (или наоборот, лишний)...

ksa · #7 (**permalink**) 29.09.2011, 13:13

Сообщение от vatar

У меня IE ни с глобальным стилем (как здесь), ни через файл не работает.

Так мой пример у тебя работает? Какой у тебя ИЕ?

vatar · #8 (**permalink**) 29.09.2011, 14:34

Пример работает.
Но при копировании ко мне на сервер - уже нет.
IE 8.0.6001.19702

ksa · #9 (**permalink**) 29.09.2011, 14:37

Сообщение от vatar

при копировании ко мне на сервер - уже нет

Сервер заколдован...

vatar · #10 (**permalink**) 29.09.2011, 14:47

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

Форум

Справочник

Discord чат

Курсы javascript