单击上方的表格行时插入表格行

Question

Right now I have a page that is displaying a large SQL database. There's a lot of information for each row, so I limited what is displayed. I want a user to be able to click a row and have a row below that popped up with all of the information there.

The code I am using now to display my table:

<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>

I know it's not the prettiest, but most of it is just repeated commands checking different SQL columns so the correct information is displayed.

I'm not entirely sure how to start about doing what I want to. Can anyone lend a hand?

Answer 1

Next is an example of how to show/hide rows in a table. In order to test it, copy this code and paste it in a PHP file, then open it in your browser. This is how it works : pairs of rows are displayed on each loop, the first row is visible (with basic data), the second row is filled with data but it is hidden. When the first row of each pair is clicked, the second row of the pair is displayed, if the first row is clicked again the second row hides. More explanations after the code:

<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>

The first row has an "onclick" event, this event is on the top of the code (in the javascript section). The second row has an id, constructed with "tr" and the id of the database row ("tr1", "tr2", ...), so we can uniquely identify each <tr> .

Now, what you have to do in your code is display ( echo ) in the second row all the data you want to hide.