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

[dr.MIG]

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

[Zenitchik]

Пардон за некрофилию:

Код: Выделить всё

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]

ИЕ гораздо злее

[Zenitchik]

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

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

[dr.MIG]

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

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

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

[Zenitchik]

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

[Mastekor]

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

[Zenitchik]

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