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

时间:2016-07-22 20:13:43

标签: javascript php jquery html

现在我有一个显示大型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列,因此显示正确的信息。

我不完全确定如何开始做我想做的事。任何人都可以伸出援手吗?

1 个答案:

答案 0 :(得分:0)

接下来是如何在表格中显示/隐藏行的示例。为了测试它,复制此代码并将其粘贴到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,用“tr”和数据库行的id(“tr1”,“tr2”,...)构成,所以我们可以唯一地标识每个<tr>

现在,您需要在代码中执行的操作是在第二行显示(echo)您要隐藏的所有数据。