0

ページの上部に以下の JS があり、ロード時にすべてのテーブルを正常に折りたたむことができます。ただし<table id="ctable">、「ctable」のIDを持つテーブルのみを折りたたむ方法を見つけようとしていますか、または折りたたみ可能にするためにテーブルを指定する他の方法がありますか?

<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

4 に答える 4

1

あなたが探しているgetElementById：

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

jQueryを使用すると、次のようになります

$('#ctable tbody').hide();
于 2010-12-31T01:28:04.493 に答える
1

通常、ID はドキュメント内の各要素に固有です。（編集する必要があります）

有名な「ドル関数」を使用して ID にすばやくアクセスできます。

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 ライブラリには、これらすべてを行うさまざまな関数があります。

于 2010-12-31T01:28:48.733 に答える
0

HTMLを有効にするために、すべてのIDを1回だけ使用できます。

非表示にする（そして可能であるはずの）テーブルに同じ（CSS）クラスを割り当てることができる場合は、お気に入りのjavascriptフレームワークのクラスセレクターを使用できます（例：http：//api.jquery .com / class-selector /）。

于 2011-01-02T10:57:36.150 に答える
0

私がしたことが正しい方法であったかどうかはわかりませんが、うまくいきます。

to<tbody>内の html タグを変更し、代わりに tfoot 要素を探すように元の JavaScript を更新しただけで、他のテーブルではなく、これらのテーブルのみが折りたたまれます。<table><tfoot>

これに関して問題があるかどうかを誰かが知っているか、それがなぜなのかを私に説明してくれるなら、それは素晴らしいことです.

于 2011-01-01T09:16:42.150 に答える