JavaScript. Сворачивающиеся таблицы.

Личный блог местного доктора. Здесь даются бесплатные медицинские консультации, обсуждаются вопросы здравоохранения и конечно же, программирования.

Модератор: dr.MIG

dr.MIG
Гуру
Гуру
Аватара пользователя
 
Сообщения: 1441
Зарегистрирован: 18.12.2004 (Сб) 9:53
Откуда: г.Ярославль

JavaScript. Сворачивающиеся таблицы.

Сообщение dr.MIG » 07.12.2007 (Пт) 15:43

На днях передо мной встала задача -- для таблиц, отображаемых на HTML-странице реализовать возможность сворачивать таблицу, оставляя видимым один заголовок. Через час раздумий пришла одна мысль... Может кому и пригодится -- используя этот способ можно реализовать выпадающее меню с любой степенью вложенности.

HTML-код таблицы:
Код: Выделить всё
<div>
<table border="0" cellspacing="1">
<tr><td class="marker" onclick="resize(this)">-</td><td>Строка заголовка</td></tr>
<tr><td>1</td><td>Текст в таблице</td></tr>
<tr><td>2</td><td>Текст в таблице</td></tr>
<tr><td>3</td><td>Текст в таблице</td></tr>
</table>
</div>


Описание используемых стилей:
Код: Выделить всё
td {background-color:#FFFFFF}
td.marker {cursor:pointer}
div {background-color:#000000; display:inline}


Функция, осуществляющая разворачивание/сворачивание таблицы (JavaScript):
Код: Выделить всё
function resize(objCell)
{     objParentDiv=objCell.parentElement.parentElement.parentElement.parentElement
  if (objParentDiv.style.overflow=="hidden")
  {
  objParentDiv.style.overflow="visible";
  objCell.innerText="-"
  }
  else
  {
  objParentDiv.style.overflow="hidden";
  objParentDiv.style.height=objCell.clientHeight+2;
  objCell.innerText="+"
  }
}


Данный код работает в IE, для Opera придётся поколдовать над свойством display тэга DIV, устанавливая значение inline-block прямо в скрипте при обнаружении Oper'ы у пользователя.
Salus populi suprema lex

Zenitchik
Постоялец
Постоялец
 
Сообщения: 369
Зарегистрирован: 21.12.2006 (Чт) 14:48

Сообщение Zenitchik » 01.06.2008 (Вс) 13:35

Пардон за некрофилию:
Код: Выделить всё
function resize(objCell){
   var objParent;
   objParent=objCell.parentNode.parentNode;
   for(var j=1;j<objParent.childNodes.length;j++){
      if(objParent.childNodes[j].style){
         if(objParent.childNodes[j].style.display=="none"){
            objParent.childNodes[j].style.display="";
            objCell.innerHTML="-";
         }
         else{
            objParent.childNodes[j].style.display="none";
            objCell.innerHTML="+";
         }
      }
   }
}



Мой небольной совет: забудьте про InnerText как про явление. Я его нигде кроме ишака не видел (мегареспект Мелкомягким, позор остальным).
Про parentElement - тоже забудьте: его нет. Есть parentNode
Юзайте методы DOM - они гаратнированно во всех браузерах работают.
UPD:
Проверил. Работает во всех браузерах.

UPD2:
Еще один маленький совет: тестировать надо в FireFox. Он самый злой к ошибкам.

nekeda
Постоялец
Постоялец
 
Сообщения: 710
Зарегистрирован: 10.04.2005 (Вс) 23:20

Сообщение nekeda » 01.06.2008 (Вс) 18:19


Zenitchik
Постоялец
Постоялец
 
Сообщения: 369
Зарегистрирован: 21.12.2006 (Чт) 14:48

Сообщение Zenitchik » 01.06.2008 (Вс) 18:28

У меня иная картина. FF стопорит выполнение скрипта сразу, как возникает ошибка, а IE еще пытается что-то сделать (браузероделам руки поотрывать. ИМХО, на каждую ошибку кода браузер должен реагировать отказом отображать страницу).

Кроме того, в ИЕ поддерживает не JavaScript (который им не дали), а JS - это язык с тем же синтаксисом, но если покопаться - всплывут различия в объектных моделях. Собственно, они видны в примере выше.

dr.MIG
Гуру
Гуру
Аватара пользователя
 
Сообщения: 1441
Зарегистрирован: 18.12.2004 (Сб) 9:53
Откуда: г.Ярославль

Сообщение dr.MIG » 05.06.2008 (Чт) 15:31

Zenitchik, да, твой вариант оказался лучше. Проверено работает в IE, NN, FF, Opera.

Ещё лучше будет, если поменять мой первоначальный вариант HTML-кода. DIV, задний фон которого создавал чёрные границы таблицы лучше убрать вообще, а стиль background-color:#000000 задать для TABLE.

P.S. спасибо за коментарий относительно объектной модели.
Salus populi suprema lex

Zenitchik
Постоялец
Постоялец
 
Сообщения: 369
Зарегистрирован: 21.12.2006 (Чт) 14:48

Сообщение Zenitchik » 05.06.2008 (Чт) 22:10

Обращайтесь.
У меня по воле случая имется определенный опыт написания скриптов, приобретенный в среде веб-админов со всеми их кодерскими тараканами.

Mastekor
Начинающий
Начинающий
 
Сообщения: 1
Зарегистрирован: 26.06.2008 (Чт) 16:04

Сообщение Mastekor » 26.06.2008 (Чт) 16:07

А как сделать так, чтобы таблицы сразу появлялись свернутыми?

Zenitchik
Постоялец
Постоялец
 
Сообщения: 369
Зарегистрирован: 21.12.2006 (Чт) 14:48

Сообщение Zenitchik » 26.06.2008 (Чт) 18:52

Я бы не стал сильно заморачиваться с изменением скрипта и прописал всем строкам таблицы, кроме верхней, style="display:none;"
Вы, надеюсь, со знанием дела HTML кодите?
Знание английского языка - затрудняет понимание кода


Вернуться в dr.MIG

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3

    TopList