使用 jQuery 在 PHP/HTML 中输出相关的嵌套表答案

【问题标题】：Outputting relevent nested tables in PHP/HTML with jQuery使用 jQuery 在 PHP/HTML 中输出相关的嵌套表
【发布时间】：2016-08-31 12:09:17
【问题描述】：

所以，我正在用 HTML、PHP、CSS 和 jQuery 编写网页。该数据库从 mysql 数据库中提取，并且可以很好地获取数据。但是，它运行两个查询。

输出表格的PHP/HTML代码如下：

function OutputAll($MariaDB, $startdate){
      $SQL = "SELECT lotNum, jobNum, date, material FROM manufacturing WHERE date >= '".$startdate."' ORDER BY date;";
      $result = $MariaDB->Query($SQL);

  if (! $result === FALSE) {
    // output data of each row
    ?>
    <table align="center" class="TableMainDesign" style="overflow: hidden;">
      <thead>
        <th>Lot Number</th>
        <th>Job Name</th>
        <th>Date</th>
        <th>Material</th>
      </thead>
      <tbody style='overflow: hidden;'>
        <?php
        while($row = $result->fetch_assoc()) {
          echo "<tr class='lotRow'><td>".$row["lotNum"]."</td><td>".$row["jobNum"]."</td><td>".date("m/d/Y", strtotime($row["date"]))."</td><td>".$row["material"]."</td>";
          $SQL2 = "SELECT itemdata.lotNum AS 'Lot Number', itemdata.itemNum AS 'Item Number', itemconnectors.Connector1 AS 'Connector 1', ";
          $SQL2 .= "itemconnectors.Connector2 AS 'Connector 2', itemconnectors.S1 AS 'Spec 1', ";
          $SQL2 .= "CONCAT(FORMAT(itemdimensions.Short_Side_1, 2), ' x ', FORMAT(itemdimensions.Long_Side_1, 2), ' x ', ";
          $SQL2 .= "FORMAT(itemdimensions.Short_Side_2, 2), ' x ', FORMAT(itemdimensions.Long_Side_2, 2)) AS 'Dimensions' FROM itemdata ";
          $SQL2 .= "INNER JOIN harringtondb.itemconnectors ON itemdata.lotNum=itemconnectors.lotnum AND itemdata.itemNum=itemconnectors.itemNum ";
          $SQL2 .= "INNER JOIN harringtondb.itemdimensions ON itemconnectors.lotNum=itemdimensions.lotNum AND itemdata.itemNum=itemdimensions.itemNum ";
          $SQL2 .=" WHERE itemdata.lotNum = '".$row["lotNum"]."'";
          $SQL2 .= " ORDER By itemdata.itemNum ASC;";

          $result2 = $MariaDB->Query($SQL2);

          if (! $result2 === FALSE){
            ?>
            <tr class ="hiddenItemdata"><td class ="hiddenItemdata"  colspan="4">
              <table class ="hiddenItemdata">
                <thead>
                  <th class ="hiddenItemdata">Lot Number</th>
                  <th class ="hiddenItemdata">Item Number</th>
                  <th class ="hiddenItemdata">Connector 1</th>
                  <th class ="hiddenItemdata">Connector 2</th>
                  <th class ="hiddenItemdata">Spec 1</th>
                  <th class ="hiddenItemdata">Dimensions</th>
                </thead>
                <tbody>
                  <?php
                  while($row2 = $result2->fetch_assoc()){
                    echo "<tr class='test'><td>".$row2["Lot Number"]."</td><td>".$row2["Item Number"]."</td><td>".$row2["Connector 1"]."</td><td>".$row2["Connector 2"]."</td><td>".$row2["Spec 1"]."</td><td>".$row2["Dimensions"]."</td></tr></tr>";
                  }
                  ?></tbody></table></td></tr><?php
                }else{
                  echo "0 Results!";
                  ?></tr><?php
                }
              }
            } else {
              echo "0 results";
            }
            ?>
          </tbody>
        </table>
        <?php
      }

相关的 CSS 在这里：

.TableMainDesign{
  border: 0 #3D72A4;
  width: 600;
  cellspacing: 10;
  cellpadding: 10;
  color: black;
  text-align: center;
  border-collapse: collapse;
  width: 75%;
}

tr:hover {
  background-color: #f5f5f5;
}

th {
  background-color: #31BCEB;
  color: BLACK;
  text-align: center;
  border: 1px solid #ddd;
}

.TableMainDesign, td {
    border: 1px solid #ddd;
    text-align: left;
}

.TableMainDesign td {
  height: 20px;
}

.hiddenItemdata{
  display: none;
}

这里是我认为错误所在的地方，在 jQuery Here 中：

$('.lotRow').click(function(){
  //  $('.hiddenItemdata').slideToggle('slow');
    //$(this).find('.hiddenItemdata').show();
    $(this).closest('tr').next().find('.hiddenItemdata').slideToggle('slow');
  });

注释行是尝试的解决方案。我要做的基本上是，一旦单击lotrow (tr tag)，我想要hiddenitemdata 类的所有内容，与那个低行标签相关。我试图找到下一个 tr 标签，并使用 next 来获取 tr，然后使用 'find' 来获取类名以显示它。任何帮助表示赞赏。

简单来说，我只是想只显示相关的嵌套表，而不是全部显示。

【问题讨论】：

您确定 slideToggle 可用于表格吗？表格和动画不能很好地配合使用 (stackoverflow.com/questions/5126704/slidetoggle-in-table-row)
我让它与另一组表一起工作，尽管它们不是动态的
在您打开之前未关闭 ('')
如果你正确关闭了，那么你可能会调用 $('.lotRow').siblings('.hiddenItemdata').show()
那个解决方案还是不行，我关闭了很多行，没有显示表格的jquery效果