Вывод релевантных вложенных таблиц в PHP / HTML с помощью jQuery

Итак, я пишу веб-страницу в 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классом, относящимся к этому тегу low row. Я попытался найти следующий тег tr, и использовать next, чтобы получить tr, а затем использоватьfind», чтобы получить имя класса, чтобы показать его. Любая помощь ценится.

В simple Я просто пытаюсь показать только соответствующую вложенную таблицу, а не их все.

1 ответ

  1. Пытаться

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

    Примечание: это плохая практика, чтобы смешивать запросы базы данных, в то время как вы выводите данные. Лучше сначала выполнить все запросы, использовать соответствующую структуру данных для хранения данных, а затем выводить данные с помощью созданной структуры данных.

    Также :вы переполнены.hiddenItemdata. Просто используйте его на TR. Не нужно надевать его на всех своих детей.

    Вот очень быстрая демонстрация .