Свернуть таблицы с определенным идентификатором таблицы? JavaScript - PullRequest
0 голосов
/ 31 декабря 2010

У меня есть приведенный ниже JS вверху моей страницы, и он успешно сворачивает ВСЕ таблицы при загрузке. Однако я пытаюсь выяснить, как свернуть только <table id="ctable"> таблицы с идентификатором "ctable" или есть какой-то другой способ указания таблиц, чтобы сделать разборную и т. Д.

<script type="text/javascript"> 

   var ELpntr=false;
   function hideall()
   {
      locl = document.getElementsByTagName('tbody');
      for (i=0;i<locl.length;i++)
      {
         locl[i].style.display='none';
      }
   }

   function showHide(EL,PM)
   {
      ELpntr=document.getElementById(EL);
      if (ELpntr.style.display=='none')
      {
         document.getElementById(PM).innerHTML=' - ';
         ELpntr.style.display='block';
      }
      else
      {
         document.getElementById(PM).innerHTML=' + ';
         ELpntr.style.display='none';
      }
   }
   onload=hideall;
</script>

HTML повторяет использование PHP. Это цикл for для оператора и может быть несколько таблиц.

echo "<table id=\"ctable\">"
."<thead><tr><th>"
."<a href=\"#\" onclick=\"showHide('show".$show->showid."','span".$show->showid."')\"><span id=\"span".$show->showid."\"><img src=\"images\icon_collapse.gif\"></span><span>".$show->showname."</span></a>"
."</th></tr></thead>";
echo "<table><tbody id=\"show".$show->showid."\">"
."<tr><td rowspan=\"8\"><a class=\"thumbnail\" href=\"#thumb\"><img src=\"".$show->image."\" height=\"150px\" width=\"150px\"><span><img src=\"".$show->image."\"/><br/>".$show->showname."</span></a></td><td rowspan=\"8\"><img class=\"line\" width=\"2\" height=\"100%\"></td><td class=\"jralign\">Show ID:</td><td>".$show->showid."</td></tr>"
."<tr><td class=\"jralign\">Show Link:</td><td><a href=\"".$show->showlink."\">".$show->showlink."</a></td></tr>"
."<tr><td class=\"jralign\">Started (Year):</td><td>".$show->started."</td></tr>"
."<tr><td class=\"jralign\">Ended (Year):</td><td>".$yearended."</td></tr>"
."<tr><td class=\"jralign\">Seasons:</td><td>".$show->seasons."</td></tr>"
."<tr><td class=\"jralign\">Classification:</td><td>".$show->classification."</td></tr>"
."<tr><td class=\"jralign\">Network:</td><td>".$show->network."</td></tr>"
."<tr><td class=\"jralign\">Status:</td><td>".$show->status."</td></tr>"
."</tfoot></table>"
."</table><br/>";

Ответы [ 4 ]

1 голос
/ 31 декабря 2010

Обычно идентификаторы уникальны для каждого элемента в документе.(EDIT должен быть)

Вы можете быстро получить идентификатор с помощью известной «долларовой функции»:

function $(idString) { return document.getElementById(idString); } 

..., которая вернет элемент с этимID, например var targetTable = $('ctable');, и вы можете приступить к работе с ним.


Атрибут name можно использовать для группировки элементов вместе.Затем вы можете использовать getElementsByName(), чтобы получить группу (кроме IE).Кроме того, атрибут name не является строго допустимым для большинства элементов, поэтому его не рекомендуется использовать.

Однако я все равно нахожу этот метод весьма полезным.Эта функция будет работать во всех браузерах:

function $N(name,parentObj) {  //Can provide parent object to optimize search
  var ALL, E = new Array();
  parentObj ? ALL = $T("*",parentObj) : ALL = $T("*");

  for(a=0;a<ALL.length;a++) { 
   ALL[a].getAttribute('name') == name ? E.push(ALL[a]) : null; 
  }
  return E;
};

..., которая будет возвращать группу элементов с одинаковым именем.


Так как мы находимся в теме,строго допустимый метод сбора группы элементов имеет общее значение в их атрибуте class.

Библиотека JQuery имеет различные функции, которые выполняют все это.

1 голос
/ 31 декабря 2010

Вы ищете getElementById:

locl = document.getElementById("ctable").getElementsByTagName('tbody');

Используя jQuery , это будет

$('#ctable tbody').hide();
0 голосов
/ 02 января 2011

Чтобы сделать HTML действительным, вам разрешено использовать каждый идентификатор точно один раз .

Если вы можете назначить тот же (CSS) класс для таблиц, которые вы хотите скрыть (и это должно быть возможно), вы можете использовать селектор классов вашей любимой инфраструктуры JavaScript ( пример: http://api.jquery.com/class-selector/).

0 голосов
/ 01 января 2011

Не уверен, что то, что я сделал, было правильным способом, но это работает.

Все, что я сделал, это изменил тег <tbody> html внутри <table> на <tfoot> и обновил мой исходный javascript, чтобы вместо него искать элемент tfoot, и теперь только эти таблицы рушатся, а другие нет.

Если кто-нибудь знает, будут ли какие-то проблемы в этом отношении, или попытается объяснить мне, почему это так, это было бы превосходно.

...