显示单击“显示”按钮可隐藏表格

Question

I am newbie in php and js .I want show my table on clicking on the show button . 我是php和js的新手。我想通过单击show按钮显示表格。 but its not working. 但它不起作用。 My tables should display only when i click on the show button. 我的表格仅在我单击显示按钮时才显示。 i am a php student please help me. 我是一名PHP学生，请帮助我。

  <!DOCTYPE HTML>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }       </script>
  <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
  <link href="css/style.css" rel='stylesheet' type='text/css' />
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  <link href="css/font-awesome.css" rel="stylesheet">
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <!-- Custom Theme files -->
  <script src="js/jquery-1.12.0.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <!--animate-->
  <link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
  <script src="js/wow.min.js"></script>
      <script>
           new WOW().init();
      </script>
      </head>
   <style>
                      #home {
                        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                        border-collapse: collapse;

                      }

                      #home td, #home th {
                        border: 1px solid #ddd;
                        padding: 5px;
                      }

                      #home tr:nth-child(even){background-color: #f2f2f2;}

                      #home tr:hover {background-color: #ddd;}

                      #home th {
                        padding-top: 12px;
                        padding-bottom: 12px;
                        text-align: left;
                        background-color: #007bff;
                        color: white;

                      }
                      </style>   
  <style type="text/css">
    #profile {
      display: none;
    }
  </style>

  <body>
  <?php include('include/header.php');?>

  <div class="banner3" style="background: url(images/17.jpg); background-size: cover;">
    <div class="container">
      <h1 class="wow zoomIn animated animated" data-wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-name: zoomIn;">My Tour</h1>
    </div>
  </div>

   <form class="form-horizontal"  method="post" style="padding-top: 75px;padding-right: 50px;padding-bottom: 100px">
      <div class="form-group">
          <label class="control-label col-sm-2" for="From">From:</label>
          <div class="col-sm-10">
            <select class="form-control" name="From" required/>
              <option value="">------Select-----</option>
              <option value="Kottayam">Kottayam</option>
              <option value="Kollam">Kollam</option>
              <option value="Kochi">Kochi</option>
              <option value="TVM">TVM</option>
              <option value="Munnar">Munnar</option>
              <option value="Kozhikode">Kozhikode</option>
              <option value="Muvattupuzha">Muvattupuzha</option>
            </select>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="To">To:</label>
          <div class="col-sm-10">
            <select class="form-control" name="To" required/>
              <option value="">------Select-----</option>
              <option value="Kottayam">Kottayam</option>
              <option value="Kollam">Kollam</option>
              <option value="Kochi">Kochi</option>
              <option value="TVM">TVM</option>
              <option value="Munnar">Munnar</option>
              <option value="Kozhikode">Kozhikode</option>
              <option value="Muvattupuzha">Muvattupuzha</option>
            </select>
            </select>
          </div>
        </div>

      <div class="control-label" style="padding-bottom: 50px">

              <button type="submit" name="submit"  class="btn-primary btn" formnovalidate onclick="detail();">Show</button>
        </div>
      </form>
      <div id="profile">
      <div>
        <?php
        $From =$_POST['From'];
        $result = mysqli_query($conn,"SELECT veh_type,veh_driver,veh_drivno FROM vehicle where picup_point = '$From'") or die("Error: " . mysqli_error($conn));
        ?>
        <table id="home" align="left" border="1" width="45%">
          <tr><th>Vehicle Type</th>
            <th>Driver</th>
            <th>Phone Number</th></tr>
            <?php
            while($row = mysqli_fetch_array($result))
            {
              if(isset($_POST["submit"]))
            {
              $veht=$row['veh_type'];
              $veho=$row['veh_driver'];
              $vehno=$row['veh_drivno'];
              ?>
            <tr>  
              <td><?php echo "$veht"; ?></td>
              <td><?php echo "$veho"; ?></td>
              <td><?php echo "$vehno"; ?></td>
            </tr>
              <?php } ?>
          <?php } ?>

        </table>

      </div>
      <div>
        <?php
        $To =$_POST['To'];
        $result = mysqli_query($conn,"SELECT veh_type,veh_driver,veh_drivno FROM vehicle where picup_point = '$To'") or die("Error: " . mysqli_error($conn));
        ?>
        <table id="home" border="1" align="right" width="45%">
          <tr><th>Vehicle Type</th>
            <th>Driver</th>
            <th>Phone Number</th></tr>
            <?php
            while($row = mysqli_fetch_array($result))
            {
              if(isset($_POST["submit"]))
            {
              $veht=$row['veh_type'];
              $veho=$row['veh_driver'];
              $vehno=$row['veh_drivno'];
              ?>
            <tr>  
              <td><?php echo "$veht"; ?></td>
              <td><?php echo "$veho"; ?></td>
              <td><?php echo "$vehno"; ?></td>
            </tr>
              <?php } ?>
          <?php } ?>

        </table>

      </div>

    <!----------------->
    <div>
        <?php
        $From =$_POST['From'];
        $result = mysqli_query($conn,"SELECT hotel_name,hotel_no,hotel_email FROM hotels where hotel_loc = '$From'") or die("Error: " . mysqli_error($conn));
        ?>
        <table id="home" align="left" border="1" width="45%" style="padding-top: 25px">
          <tr><th>Hotel</th>
            <th>Phone Number</th>
            <th>Email</th>
            <th>Details</th></tr>
            <?php
            while($row = mysqli_fetch_array($result))
            {
              if(isset($_POST["submit"]))
            {
              $hot_name=$row['hotel_name'];
              $hot_no=$row['hotel_no'];
              $hot_email=$row['hotel_email'];
              ?>
            <tr>  
              <td><?php echo "$hot_name"; ?></td>
              <td><?php echo "$hot_no"; ?></td>
              <td><?php echo "$hot_email"; ?></td>
              <td><a href="hotels.php?hot_name=<?php echo $hot_name;?>"><i class="fas fa-hotel fa-fw" style="color: #17a2b8;"></i></a></td>
            </tr>
              <?php } ?>
          <?php } ?>

        </table>

      </div>
       <div>
        <?php
        $To =$_POST['To'];
        $result = mysqli_query($conn,"SELECT hotel_name,hotel_no,hotel_email FROM hotels where hotel_loc = '$To'") or die("Error: " . mysqli_error($conn));
        ?>
        <table id="home" align="right" border="1" width="45%">
          <tr><th>Hotel</th>
            <th>Phone Number</th>
            <th>Email</th>
            <th>Details</th></tr>
            <?php
            while($row = mysqli_fetch_array($result))
            {
              if(isset($_POST["submit"]))
            {
              $hot_name=$row['hotel_name'];
              $hot_no=$row['hotel_no'];
              $hot_email=$row['hotel_email'];
              ?>
            <tr>  
              <td><?php echo "$hot_name"; ?></td>
              <td><?php echo "$hot_no"; ?></td>
              <td><?php echo "$hot_email"; ?></td>
              <td><a href="hotels.php?hot_name=<?php echo $hot_name;?>"><i class="fas fa-hotel fa-fw" style="color: #17a2b8;"></i></a></td>
            </tr>
              <?php } ?>
          <?php } ?>

        </table>

      </div>
    </div>


      <?php } ?>

Javascript is JavaScript是

  function detail() {
    document.getElementById('profile').style.visibility = "visible";

  }

My tables should display only when i click on the show button. 我的表格仅在我单击显示按钮时才显示。 i am a php student please help me. 我是一名PHP学生，请帮助我。

Answer 1

Try this: 尝试这个：

function detail() {
  document.getElementById('profile').style.display='block';
      }

you have to Remove the semicolon when calling the function from onclick too like this: 您也需要从onclick调用函数时删除分号，如下所示：

<button type="submit" name="submit"  class="btn-primary 
     btn" formnovalidate="formnovalidate" onclick="detail()">Show</button>

Answer 2

On your javascript add "#" to the profile, you are calling a HTML DOM id Property. 在您的javascript上向配置文件添加“＃”，您正在调用HTML DOM id属性。 ie 即

document.getElementById('#profile').style.visibility = "visible";

Check this https://www.w3schools.com/jsref/prop_html_id.asp 检查此https://www.w3schools.com/jsref/prop_html_id.asp

Answer 3

  $("#btn").click(function() { $("#tblop").toggleClass("tbl_close"); });

 .tbl_open{ display:none; } .tbl_close{ display:block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tblop" class="tbl_open"> <thead> <th> <tr> <td>Name</td> <td>Salary</td> </tr> </th> </thead> <tbody> <tr> <td>Jhon</td> <td>23400</td> </tr> </tbody> </table> <button id="btn" type=submit>click to show table</button>

显示单击“显示”按钮可隐藏表格

问题描述

3 个解决方案

解决方案1
1 2019-01-14 09:09:43

解决方案2
0 2019-01-14 09:17:07

解决方案3
0 已采纳 2019-01-14 09:17:41

显示单击“显示”按钮可隐藏表格

问题描述

3 个解决方案

解决方案1 1 2019-01-14 09:09:43

解决方案2 0 2019-01-14 09:17:07

解决方案3 0 已采纳 2019-01-14 09:17:41

解决方案1
1 2019-01-14 09:09:43

解决方案2
0 2019-01-14 09:17:07

解决方案3
0 已采纳 2019-01-14 09:17:41