使用jQuery在PHP/HTML中輸出相關的嵌套表格

Question

因此，我正在用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中這裏：

$('.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'獲取類名稱以顯示它。任何幫助表示讚賞。

簡而言之，我只是試圖僅顯示相關的嵌套表格，而不是全部。

Answer 1

嘗試

$('.lotRow').click(function(){ 
    $(this).next('.hiddenItemdata').slideToggle('slow'); 
}); 

側面說明：這是不好的做法，而你是輸出數據混合數據庫查詢。最好首先進行所有查詢，使用適當的數據結構來保存數據，然後使用所製作的數據結構輸出數據。

另外：你對.hiddenItemdata過度使用。只需在TR上使用它。不需要把它放在所有的孩子身上。

這是一個非常快速的demo。