Outputting relevent nested tables in PHP/HTML with jQuery

Question

So, I'm writing a webpage in HTML, PHP, CSS, and jQuery. This database pulls from a mysql database, and it gets the data fine. However, it runs two queries.

The PHP/HTML Code to output the table is below:

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
      }

The Relevent CSS is Here:

.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;
}

And Here is where I think the error actually lies, in the jQuery Here:

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

The commented lines are attempted solutions. What I'm trying to do is essentially, once the lotrow is clicked (tr tag), I'd like everything with the hiddenitemdata class, relevent to that low row tag. I attempted to find the next tr tag, and to use next to get the tr, and then use 'find' to get the class name to show it. Any help is appreciated.

In simple, I'm just trying to show the relevent nested table only, instead of them all.

are you sure slideToggle works with tables? Tables and animations don't play well together (http://stackoverflow.com/questions/5126704/slidetoggle-in-table-row) — Pevara, May 05 '16 at 16:10
I have it working with another set of tables, although those aren't dynamic — ZKayyali, May 05 '16 at 16:22
If you close properly, then you might call $('.lotRow').siblings('.hiddenItemdata').show() — Webomatik, May 05 '16 at 16:25
That solution still didnt work, I closed lot row, there is no jquery effect showing the tables still — ZKayyali, May 05 '16 at 17:27

Mikey · Answer 1 · 2016-05-05T18:07:00.567

Try

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

Side-note: It's bad practice to mix database queries while you are outputting data. Better to do all the querying first, use an appropriate data structure to hold your data, and then output your data using the data structure you made.

Also: You are overkilling with the .hiddenItemdata. Just use it on the TR. No need to put it on all its children.

Here's a really quick demo.

Outputting relevent nested tables in PHP/HTML with jQuery

1 Answers1