Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не работает display: block под IE (https://javascript.ru/forum/misc/20990-ne-rabotaet-display-block-pod-ie.html)

inferno3 25.08.2011 02:57

Не работает display: block под IE
 
Собственно вот код:
Код:

<style>
.sdan{
        display:none;
}
</style>

<form action="index.php" name="sort" method="post">
<script language="javascript">

if(document.getElementsByClassName == undefined) { 
   document.getElementsByClassName = function(cl) { 
      var retnode = []; 
      var myclass = new RegExp('\\b'+cl+'\\b'); 
      var elem = this.getElementsByTagName('*'); 
      for (var i = 0; i < elem.length; i++) { 
         var classes = elem[i].className; 
         if (myclass.test(classes)) { 
            retnode.push(elem[i]); 
         } 
      } 
      return retnode; 
   } 
}; 
//фиксим ClassName под IE

var IE='\v'=='v'; //проверяю IE ли это
if(IE) {//если да
	function r() {//не отрабатывает дисплей блок в ие
	    var elements = document.getElementsByClassName('sdan');
	    if(document.getElementById('cb').checked){
			for (i = 0; i < elements.length; i++) {
	        elements[i].style.display = 'block';
	    }}else{for (i = 0; i < elements.length; i++) {
	        elements[i].style.display = 'none';
	    }}
	}
}else{


function r() {
	    var elements = document.getElementsByClassName('sdan');
	    if(document.getElementById('cb').checked){
			for (i = 0; i < elements.length; i++) {
	        elements[i].style.display = 'table-row';
	    }}else{for (i = 0; i < elements.length; i++) {
	        elements[i].style.display = 'none';
	    }}
	}
}
function red() {//этот код работает нормально!!!!
	    var elements = document.getElementsByClassName('postdate');
	    if(document.getElementById('cb1').checked){
			for (i = 0; i < elements.length; i++) {
	        elements[i].style.backgroundColor = '#F16969';
	    }}else{for (i = 0; i < elements.length; i++) {
	        elements[i].style.backgroundColor = '';
	    }}
	}	
	</script>

<input type="checkbox" id="cb" onclick="r()" > Показать все заказы <br>
<input type="checkbox" id="cb1" onclick="red()" > Подсветить просроченные <br>
</form>

Ну что table-row под IE работать не станет это понятно,
но чтобы block ... :-E

По умолчанию класс "sdan" - display: none;
Если изменить "sdan" на display: block то скрипт со второго клика по чекбоксу начинает работать, правда криво как-то. С помощью этого скрипта нужно показать скрытые строки в таблице.
Собственно сабж.

RUVATA 25.08.2011 08:33

Так они не отрисовываются, или действительно не изменяют состояние ?
дебаг проводил ?

nikita.mmf 25.08.2011 13:23

С каких пор IE поддерживает getElementsByClassNamе?

inferno3 25.08.2011 22:51

Цитата:

Сообщение от nikita.mmf (Сообщение 122360)
С каких пор IE поддерживает getElementsByClassNamе?

С тех самых как функцию на javaskript написали которая создает этот метод

inferno3 25.08.2011 22:54

Цитата:

Сообщение от RUVATA (Сообщение 122297)
Так они не отрисовываются, или действительно не изменяют состояние ?
дебаг проводил ?

первый чекбокс не работает, не меняет дисплэй в ИЕ
Дебаг по данному скрипту ничего не дал
Второй чекбокс отрабатывает и подкрашивет как надо.(просто для примера привел)

melky 26.08.2011 00:07

всё работает, только надо бы знать перед написанием скрипта, что select.style.display === "inline", а не "block"

и еще : он ругается, когда имя переменной совпадает с id элемента.

<select id="a" style="display:none"><option>a</option></select>
<script>
b = document.getElementById('a');
b.style.display = "inline";
</script>


т.е. если бы я выбрал 'a', а не 'b', то он бы начал плеваться.

inferno3 26.08.2011 21:40

Может кто ни будь предложет более изящный метод скрытия нескольких строк таблицы по клику на чекбокс?
Я заменил класс на id в виде 1,2,3,4....29, id в ИЕ должен отрабатываться нормально.
теперь все эти строки нужно скрыть по чекбокчу, подскажите как лучше их перебрать?
что не так я написал?
function r() {
	if(document.getElementById('cb').checked){
	for (i=0; i<29;i++){
		var y=0;
		getElementsByid(y).style.display = 'table-row';
		y++;
	}
}else{
	for (i=0; i<29;i++){
		var y=0;
		getElementsByid(y).style.display = '';
		y++;
	}
}

popov654 27.08.2011 04:27

Опечатка в пятой строчке)
А так вроде всё хорошо...

devote 27.08.2011 04:53

for (i=0; i<29;i++){
*!*
	var *!* y=0; */!*
	*!*document.getElementById*/!*( *!* y */!* ).style.display = 'table-row';
*/!*
	y++;
}
Посмотрите сами на свою ошибку

popov654 27.08.2011 14:40

Хи) Чёрт, я тоже проглядел) Естественно :)
А зачем товарищу y, пусть i юзает напрямую)

inferno3 27.08.2011 19:35

конструкция вида:
for (i=0; i<29;i++){
document.getElementById(i).style.display='table_row';
}

Не работает, поэтому я начал изобратеть теже яйца только в профиль =((.
Может я переменную " i " вместо id неправильно вставляю(кавычки или еще что)? Подскажите..

devote 27.08.2011 20:13

Цитата:

Сообщение от inferno3
Может я переменную " i " вместо id неправильно вставляю(кавычки или еще что)? Подскажите..

1. ID элемента не может начинаться с числа.
2. значения table_row в CSS я не встречал, но видел table-row

inferno3 27.08.2011 21:54

В общем я упростил чуть и через дебагер прогнал. все равно не догоняю в чем я не догоняю ))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>тест</title>
<style>
.sdan{
	background-color:#CCDF91;
	display:none;
}
</style>
<script language="javascript">
function r(){
	if(document.getelementbyid('cb').checked){
	for (r=0; r<3;r++){
		document.getelementbyid('sdan'+r).style.display = 'table-row';
		}
}else{
	for (r=0; r<3;r++){
		document.getelementbyid('sdan'+r).style.display = '';
		
	}
    }
	}
</script>
</head>
<body>
<input type="checkbox" name="cb" id="cb" onclick="r()" > Показать все заказы <br>
<table>
<tr id="sdan0" class="sdan">
	<td>сдан</td>
    <td>сдан</td>
</tr>
<tr>
	<td>не сдан</td>
    <td>не сдан</td>
</tr>
<tr id="sdan1" class="sdan">
	<td>сдан</td>
    <td>сдан</td>
</tr>
<tr id="sdan2" class="sdan">
	<td>сдан</td>
    <td>сдан</td>
</tr>
<tr id="sdan3" class="sdan">
	<td>сдан</td>
    <td>сдан</td>
</tr>
<tr>
	<td>не сдан</td>
    <td>не сдан</td>
</tr>
</table>

</body>
</html>


При клике по чекбоксу дебагер выдает ошибку :
document.getelementbyid is not a function
[Прерывать на этой ошибке]if(document.getelementbyid('cb').checked){

inferno3 28.08.2011 13:51

document.getElementById - у меня написан с учетом регистра.

При клике на чекбокс данные отображает но обратно не прячет. Почему?

devote 28.08.2011 14:45

вместо этого:
document.getElementById('sdan'+r).style.display = '';
Сделай так
document.getElementById('sdan'+r).style.display = 'none';

inferno3 28.08.2011 14:48

пробывал. Не помогает:blink:
Может кто ни буть скинет к себе скриптик потестить? Я уже устал его мучать. бред какой то.
Тут вопрос уже не про IE даже. Я его с классов решил на ID поставить, дк он везде работать перестал нормально (( хотя синтаксис вроде верный.

devote 28.08.2011 15:20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>тест</title>
<style>
.sdan{
	background-color:#CCDF91;
	display:none;
}
</style>
<script language="javascript">
function r(){
	var r;
	if(document.getElementById('cb').checked){
		for (r=0; r<3;r++){
			document.getElementById('sdan'+r).style.display = 'table-row';
		}
	}else{
		for (r=0; r<3;r++){
			document.getElementById('sdan'+r).style.display = 'none';
		}
	}
}
</script>
</head>
<body>
<input type="checkbox" name="cb" id="cb" onclick="r()" > Показать все заказы <br>
<table>
<tr id="sdan0" class="sdan">
	<td>сдан</td>
    <td>сдан</td>
</tr>
<tr>
	<td>не сдан</td>
    <td>не сдан</td>
</tr>
<tr id="sdan1" class="sdan">
	<td>сдан</td>
    <td>сдан</td>
</tr>
<tr id="sdan2" class="sdan">
	<td>сдан</td>
    <td>сдан</td>
</tr>
<tr id="sdan3" class="sdan">
	<td>сдан</td>
    <td>сдан</td>
</tr>
<tr>
	<td>не сдан</td>
    <td>не сдан</td>
</tr>
</table>

</body>
</html>

inferno3 28.08.2011 18:07

а ты только style.display = 'none'; исправил? или еще что ни будь?
просто style.display = 'none'; я и сам ставил и безуспешно.

devote 28.08.2011 18:15

var r;
добавил

inferno3 28.08.2011 18:24

я как раз только что её заметил, глядь на форум и ответ тут )))
Тоесть получается переменная из условия не передаётся в тело функции если ее заранее не объявить?

devote 28.08.2011 19:29

Цитата:

Сообщение от inferno3
Тоесть получается переменная из условия не передаётся в тело функции если ее заранее не объявить?

Передается, но глобальная, а глобальная переменная имеет метод, в твоем случае сама функция названа так. Ты внутри функции пытался ее переназначить, тоесть наоборот переназначал.


Часовой пояс GMT +3, время: 06:25.