單擊上方的表格行時插入表格行

Question

現在，我有一個頁面正在顯示一個大型SQL數據庫。 每行都有很多信息，因此我限制了顯示的內容。 我希望用戶能夠單擊一行，並在下面彈出一行，並在其中彈出所有信息。

我現在用來顯示表格的代碼：

<table class="table table-striped">
            <thead class="thead-default">
            <tr align="center">
                <th class="my-table-center">Name</th>
                <th class="my-table-center">Health Services Delivered</th>
                <th class="my-table-center">Degrees</th>
                <th class="my-table-center">Post Degree Training</th>
                <th class="my-table-center">Previous Employment</th>
                <th class="my-table-center">Stakeholders Exeperienced With</th>
                <th class="my-table-center">Expertise in Watson Health Focus Areas</th>
                <th class="my-table-center">Expertise in Therapeutic</th>
                <th class="my-table-center">Regions with Experience</th>
            </tr>
            </thead>
            <?php
                //Make Table Here//
                while($row = mysqli_fetch_array($search_result)): 
            ?>
            <tr>
                <td><?php //name
                echo $row['name'];?></td>

                <td>
                <ul>
                <?php 
                //Health Services Delivered
                if($row['delivered_outpatient']=="Yes"){echo '<li>Outpatient or Clinic Health</li>';}
                if($row['delivered_inpatient']=="Yes"){echo '<li>Inpatient</li>';}
                if($row['delivered_emergency_room']=="Yes"){echo '<li>Emergency Room</li>';}
                if($row['delivered_retail_clinic']=="Yes"){echo '<li>Retail Clinic</li>';}
                if($row['delivered_telehealth']=="Yes"){echo '<li>Telehealth</li>';}
                if($row['delivered_occupational']=="Yes"){echo '<li>Occupational Health Services</li>';}
                 ?>
                 </ul>
                </td>

                <td>
                <ul>
                <?php 
                //Degrees
                if($row['physician_degree']=="Yes"){echo '<li>Physician (MD, DO)</li>';}
                if($row['np_degree']=="Yes"){echo '<li>Nurse Practitioner</li>';}
                if($row['pa_degree']=="Yes"){echo '<li>Physician Assistant (PA)</li>';}
                if($row['nurse_degree']=="Yes"){echo '<li>Nurse</li>';}
                if($row['dds_degree']=="Yes"){echo '<li>Dentist (DDS)</li>';}
                if($row['pharmd_degree']=="Yes"){echo '<li>Pharmaceutical Degree (PharmD)</li>';}
                if($row['rd_degree']=="Yes"){echo '<li>Dietition or Nutritionist (RD)</li>';}
                if($row['mph_degree']=="Yes"){echo '<li>Master in Public Health or Administration (MPH or MPA)</li>';}
                if($row['pt_degree']=="Yes"){echo '<li>Physical/Occupational Therapist (PT/OT)</li>';}
                if($row['respiratory_degree']=="Yes"){echo '<li>Despiratory Therapist</li>';}
                if($row['social_care_degree']=="Yes"){echo '<li>Social Care Worker</li>';}
                 ?>
                 </ul>
                </td>

                <td>
                <ul>
                <?php 
                //Post Degree Training
                if($row['anes_training']=="Yes"){echo '<li>Anesthesiology</li>';}
                if($row['cardiology_training']=="Yes"){echo '<li>Cardiology</li>';}
                if($row['chronic_disease_training']=="Yes"){echo '<li>Chronic Disease Management</li>';}
                if($row['dental_training']=="Yes"){echo '<li>Dental</li>';}
                if($row['emergency_medicine_training']=="Yes"){echo '<li>Emergency Medicine</li>';}
                if($row['family_medicine_training']=="Yes"){echo '<li>Family Medicine</li>';}
                if($row['gastro_training']=="Yes"){echo '<li>Gastroenterology</li>';}
                if($row['genetics_training']=="Yes"){echo '<li>Genetics</li>';}
                if($row['gyne_training']=="Yes"){echo '<li>Gynecology</li>';}
                if($row['hema_training']=="Yes"){echo '<li>Hematology</li>';}
                if($row['infectious_disease_training']=="Yes"){echo '<li>Infectious Disease</li>';}
                if($row['internal_medicine_training']=="Yes"){echo '<li>Internal Medicine</li>';}
                if($row['neurology_training']=="Yes"){echo '<li>Neurology</li>';}
                if($row['nursing_training']=="Yes"){echo '<li>Nursing</li>';}
                if($row['nutrition_training']=="Yes"){echo '<li>Nutrition</li>';}
                if($row['obstetrics_training']=="Yes"){echo '<li>Obstetrics</li>';}
                if($row['occupational_medicine_training']=="Yes"){echo '<li>Occupational Medicine</li>';}
                if($row['oncology_training']=="Yes"){echo '<li>Oncology</li>';}
                if($row['optha_training']=="Yes"){echo '<li>Ophthalmology</li>';}
                if($row['pediatrics_training']=="Yes"){echo '<li>Pediatrics</li>';}
                if($row['pharm_training']=="Yes"){echo '<li>Pharmacy</li>';}
                if($row['preventive_medicine_training']=="Yes"){echo '<li>Preventive Medicine</li>';}
                if($row['psych_training']=="Yes"){echo '<li>Psychiatry</li>';}
                if($row['public_health_training']=="Yes"){echo '<li>Public Health</li>';}
                if($row['radiology_training']=="Yes"){echo '<li>Radiology</li>';}
                if($row['surgery_training']=="Yes"){echo '<li>Surgery</li>';}

                 ?>
                 </ul>
                </td>

                <td>
                <ul>
                <?php 
                //Previous Employment
                if($row['employed_provider']=="Yes"){echo '<li>Provider</li>';}
                if($row['employed_payer']=="Yes"){echo '<li>Payer</li>';}
                if($row['employed_health_analytics']=="Yes"){echo '<li>Health Analytics</li>';}
                if($row['employed_life_sciences']=="Yes"){echo '<li>Life Sciences</li>';}
                if($row['employed_medical_device']=="Yes"){echo '<li>Medical Device</li>';}
                if($row['employed_government']=="Yes"){echo '<li>Government</li>';}
                if($row['employed_biotech']=="Yes"){echo '<li>Biotech</li>';}
                if($row['employed_health_it']=="Yes"){echo '<li>Health IT</li>';}
                if($row['employed_other']!="Not applicable"){echo '<li>'.$row['employed_other'].'</li>';}
                 ?>
                 </ul>
                </td>

                <td>
                <ul>
                <?php 
                //Stakeholders Exeperienced With
                if($row['exp_providers']=="high level of experiences" || $row['exp_providers']=="some experiences"){echo '<li>Providers</li>';}
                if($row['exp_pharm']=="high level of experiences" || $row['exp_pharm']=="some experiences"){echo '<li>Pharmaceutical/Biotechnology</li>';}
                if($row['exp_medical_device']=="high level of experiences" || $row['exp_medical_device']=="some experiences"){echo '<li>Medical Device</li>';}
                if($row['exp_private_payers']=="high level of experiences" || $row['exp_private_payers']=="some experiences"){echo '<li>Private Payers</li>';}
                if($row['exp_public_payers']=="high level of experiences" || $row['exp_public_payers']=="some experiences"){echo '<li>Public Payers</li>';}
                if($row['exp_medical_employers']=="high level of experiences" || $row['exp_medical_employers']=="some experiences"){echo '<li>Medical Employers</li>';}
                if($row['exp_health_info_tech']=="high level of experiences" || $row['exp_health_info_tech']=="some experiences"){echo '<li>Health Information Technology</li>';}
                if($row['exp_level_other']!="Not applicable" && $row['exp_level_other']=="high level of experiences" || $row['exp_level_other']=="some experiences"){echo '<li>'.$row['exp_with_other'].'</li>';}

                 ?>
                 </ul>
                </td>

                <td>
                <ul>
                <?php 
                //Expertise in Watson Health Focus Areas
                if($row['exp_onc']=="expert"){
                    echo "<strong><li>Oncology</strong></li>";
                } elseif ($row['exp_onc']=="high level of expertise" || $row['exp_onc']=="some expertise"){echo '<li>Oncology</li>';}
                if($row['exp_genomics']=="expert"){
                    echo "<strong><li>Genomics</strong></li>";
                } elseif ($row['exp_genomics']=="high level of expertise" || $row['exp_genomics']=="some expertise"){echo '<li>Genomics</li>';}
                if($row['exp_clinical_trials']=="expert"){
                    echo "<strong><li>Clinical Trials</strong></li>";
                } elseif ($row['exp_clinical_trials']=="high level of expertise" || $row['exp_clinical_trials']=="some expertise"){echo '<li>Clinical Trials</li>';}
                if($row['exp_radiology']=="expert"){
                    echo "<strong><li>Radiology</strong></li>";
                } elseif ($row['exp_radiology']=="high level of expertise" || $row['exp_radiology']=="some expertise"){echo '<li>Radiology</li>';}
                if($row['exp_health_wellness']=="expert"){
                    echo "<strong><li>Health and Wellness</strong></li>";
                } elseif ($row['exp_health_wellness']=="high level of expertise"){echo '<li>Health and Wellness</li>';}
                if($row['exp_chronic_disease_management']=="expert"){
                    echo "<strong><li>Chronic Disease Management</strong></li>";
                } elseif ($row['exp_chronic_disease_management']=="high level of expertise"){echo '<li>Chronic Disease Management</li>';}
                if($row['exp_preventive_care']=="expert"){
                    echo "<strong><li>Preventive Care</strong></li>";
                } elseif ($row['exp_preventive_care']=="high level of expertise"){echo '<li>Preventive Care</li>';}
                if($row['exp_population_health']=="expert"){
                    echo "<strong><li>Population Health</strong></li>";
                } elseif ($row['exp_population_health']=="high level of expertise" || $row['exp_population_health']=="some expertise"){echo '<li>Population Health</li>';}
                if($row['exp_social_welfare']=="expert"){
                    echo "<strong><li>Social and Welfare Programs</strong></li>";
                } elseif ($row['exp_social_welfare']=="high level of expertise" || $row['exp_social_welfare']=="some expertise"){echo '<li>Social and Welfare Programs</li>';}
                if($row['exp_life_sciences']=="expert"){
                    echo "<strong><li>Life Sciences Real World Evidence</strong></li>";
                } elseif ($row['exp_life_sciences']=="high level of expertise" || $row['exp_life_sciences']=="some expertise"){echo '<li>Life Science Real World Evidence</li>';}
                 if($row['exp_value_based_care']=="expert"){
                    echo "<strong><li>Value Based Care</strong></li>";
                } elseif ($row['exp_value_based_care']=="high level of expertise" || $row['exp_value_based_care']=="some expertise"){echo '<li>Value Based Care</li>';}





                 ?>
                 </ul>
                </td>

                <td>
                <ul>
                <?php 
                //Expertise in Therapeutic
               if($row['exp_heart_disease']=="expert"){
                    echo "<strong><li>Heart Disease</strong></li>";
                } elseif ($row['exp_heart_disease']=="high level of expertise"){echo '<li>Heart Disease</li>';}
               if($row['exp_diabetes']=="expert"){
                    echo "<strong><li>Diabetes</strong></li>";
                } elseif ($row['exp_diabetes']=="high level of expertise"){echo '<li>Diabetes</li>';}
                if($row['exp_arthritis']=="expert"){
                    echo "<strong><li>Arthritis</strong></li>";
                } elseif ($row['exp_arthritis']=="high level of expertise" || $row['exp_arthritis']=="some expertise"){echo '<li>Arthritis</li>';}
                if($row['exp_asthma_copd']=="expert"){
                    echo "<strong><li>Asthma/COPD</strong></li>";
                } elseif ($row['exp_asthma_copd']=="high level of expertise" || $row['exp_asthma_copd']=="some expertise"){echo '<li>Asthma/COPD</li>';}
                if($row['exp_cancer']=="expert"){
                    echo "<strong><li>Cancer</strong></li>";
                } elseif ($row['exp_cancer']=="high level of expertise" || $row['exp_cancer']=="some expertise"){echo '<li>Cancer</li>';}
                if($row['exp_mental_health']=="expert"){
                    echo "<strong><li>Mental Health</strong></li>";
                } elseif ($row['exp_mental_health']=="high level of expertise" || $row['exp_mental_health']=="some expertise"){echo '<li>Mental Health</li>';}
                if($row['exp_with_other_2']!="Not applicable" && $row['exp_level_other_2']=="expert")
                {echo "<strong><li>".$row["exp_with_other_2"]."</strong></li>";} elseif ($row['exp_level_other_2']=="high level of expertise" || $row['exp_level_other_2']=="some expertise"){echo '<li>'.$row["exp_with_other_2"].'</li>';}

                 ?>
                 </ul>
                </td>

                <td>
                <ul>
                <?php 
                //Experienced in Regions
                //Stakeholders Exeperienced With
                if($row['exp_us_canada']=="high level of experiences" || $row['exp_us_canada']=="some experiences" || $row['exp_us_canada']=="minimal experiences"){echo '<li>United States and Canada</li>';}
                if($row['exp_latin_america']=="high level of experiences" || $row['exp_latin_america']=="some experiences" || $row['exp_latin_america']=="minimal experiences"){echo '<li>Latin America</li>';}
                if($row['exp_europe']=="high level of experiences" || $row['exp_europe']=="some experiences" || $row['exp_europe']=="minimal experiences"){echo '<li>Europe</li>';}
                if($row['exp_middle_east_africa']=="high level of experiences" || $row['exp_middle_east_africa']=="some experiences" || $row['exp_middle_east_africa']=="minimal experiences"){echo '<li>Middle East/Africa</li>';}
                if($row['exp_asia_pacific']=="high level of experiences" || $row['exp_asia_pacific']=="some experiences" || $row['exp_asia_pacific']=="minimal experiences"){echo '<li>Pacific Asia</li>';}
                 ?>
                 </ul>
                </td>
            </tr>
            <?php endwhile;?>
            </table>

我知道這不是最漂亮的，但是大多數只是重復的命令，用於檢查不同的SQL列，從而顯示正確的信息。

我不太確定如何開始做自己想做的事情。 誰能伸出援手？

Answer 1

接下來是如何顯示/隱藏表中的行的示例。 為了對其進行測試，請復制此代碼並將其粘貼到PHP文件中，然后在瀏覽器中將其打開。 這是這樣的：在每個循環中顯示成對的行，第一行可見（帶有基本數據），第二行充滿數據，但隱藏。 單擊每對的第一行時，將顯示該對的第二行，如果再次單擊第一行，則第二行將隱藏。 代碼后有更多說明：

<html>
  <head>
    <script type="text/javascript">
// FUNCTION TO SHOW/HIDE TABLE ROW. ACTIVATES WITH ROW CLICK.
function row_click ( id )
{ var tr = document.getElementById( "tr" + id ); // GET HIDDEN ROW.
  if ( tr.style.display == "none" )    // IF ROW IS HIDDEN
       tr.style.display = "table-row"; // SHOW ROW.
  else tr.style.display = "none";      // HIDE ROW.
}
    </script>
  </head>
  <body>
    <table border="1">
      <tr style="background:lightgray">
        <td>Name</td>
        <td>Degrees</td>
        <td>Health problems</td>
      </tr>
<?php
$database = array( array ( "id" => 1,
                           "name" => "John Doe",
                           "degrees" => "degree degree degree",
                           "health_problems" => "problems problems problems",
                           "more_data" => "John's data John's data John's data " .
                                          "John's data John's data John's data " .
                                          "John's data John's data John's data "
                         ),
                   array ( "id" => 2,
                           "name" => "Jane Doe",
                           "degrees" => "degree degree degree",
                           "health_problems" => "problems problems problems",
                           "more_data" => "Jane's data Jane's data Jane's data " .
                                          "Jane's data Jane's data Jane's data " .
                                          "Jane's data Jane's data Jane's data "
                         )
                 );

foreach ( $database as $row )
  echo "<tr onclick='row_click(\"{$row["id"]}\")'>" . // ◄■■■ NOTICE THE "ONCLICK" EVENT.
       "  <td>{$row["name"]}</td>" .
       "  <td>{$row["degrees"]}</td>" .
       "  <td>{$row["health_problems"]}</td>" .
       "</tr>" .
       "<tr style='display:none' id='tr{$row["id"]}'>" .  // ◄■■■ NOTICE THE "ID".
       "  <td colspan='3'>" .
            $row["more_data"] .
       "  </td>" .
       "</tr>";
?>
    </table>
  </body>
</html>

第一行有一個“ onclick”事件，該事件在代碼頂部（在javascript部分中）。 第二行具有一個ID，該ID由“ tr”和數據庫行的ID（“ tr1”，“ tr2”，...）構成，因此我們可以唯一地標識每個<tr> 。

現在，您在代碼中要做的是在第二行中顯示（ echo ）您要隱藏的所有數據。