javascript - 折叠表格适用于页面上的所有表格

Question

希望我能得到一些帮助，我正在构建一个包含 5 个表格的页面。 其中 2 个可使用 ( http://www.kryogenix.org/code/browser/sorttable/ ) 进行排序

一个相当大的，我希望它是可折叠的，我尝试使用这个: HTMl drilldown table: Design

但是，当我启用它时，所有表格都变得可折叠，这是上述问题中的 jQuery。

 <script type='text/javascript'>//<![CDATA[
   $(window).load(function(){
   $('thead').on('click', function(){
   $(this).next('tbody').toggleClass('collapsed');
 });
});

我对 jQuery 不熟悉，所以不知道如何修改它，所以它只使用了一张表。我尝试使用表 ID，但没有成功。

<?php
 $qcTable = "<table id ='thcol'>";
 foreach($tableArray as $cat=>$catData)
    {
     $title = ucwords(str_replace("_"," ",$cat));
     $score = number_format($catData['sc'],2);
     $qcTable .= "<thead><tr><th>$title ($score%)</th></tr></thead><tbody class='collapsed'>";
 foreach($catData as $td=>$subCatData)
   {if($td != 'a' && $td != 'b' && $td != 'c'  && $td != 'sc'){
   $getSubCat = explode("__",$subCatData['b']);
     if(sizeof($getSubCat) ==1)
          $subTitleBuild = $getSubCat[0];
     else
          {
              unset($getSubCat[0]);
              $subTitleBuild = implode(" > ",$getSubCat);
    }
  $subtitle =  ucwords(str_replace("_"," ",$subTitleBuild));
           $subscore = number_format($subCatData['sc'],2);
     $qcTable .= "<tr><td>$subtitle ($subscore%)</td></tr>";
      }
 }            $qcTable .= "</tbody>";
      }



$qcTable .= "</table>";
echo $qcTable;
?>

另外两个表格标题如下所示:

  <table class = 'sortable'><thead><th class='sorttable_numeric'>
  Ticket ID</th><th>Game</th><th>Agent</th><th>Score</th><th>Star</th></thead><tbody>

预先感谢您， C

Answer 1

你的线路

$('thead').on('click', ...);

在所有 <thead></thead> 上放置一个点击事件处理程序标签，您应该为那些您希望能够折叠的标签添加一个类，例如 <thead class="collapsable"></thead>当你用 PHP 编写它们时，你的 JavaScript 行将是:

$('thead.collapsable').on('click', ...);

这样，就只有你的 thead类 collapsable 的标签将能够触发崩溃。