javascript - 使用下拉菜单显示特定的数据表

Question

我有一个包含完美工作数据表的页面，并且刚刚创建了第二个表来显示另一个数据库表中的数据，但它们不需要同时显示在同一页面上。我的任务是创建一个显示“表 1”和“表 2”等值的下拉列表，这样当您访问该页面时，它默认显示表 1，但如果您从下拉列表中选择表 2，那么它只会显示显示表2。

这两个数据表在格式上非常相似，它们只是从数据库中的不同表中提取。目前我在代码中都有它们，所以它只显示一个在另一个之上。这是我的表格的代码，包括 HTML、php 和 JS:

<div class="dashboardTable" style="width:965px; overflow:auto;">
<table id="mytable" style="border: 1px solid #468BBD; border-collapse: collapse; width: 100%;  margin:0 auto; ">
<thead>
<tr style="border: 1px solid #468BBD;">
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
    </tr>
    </thead>
<tbody>

<?php
  while($row = mysqli_fetch_array($result1)){
?>

<tr>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
    </tr>
    <?}?>
   </tbody>
  </table>
</div>


<script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>

<div class="dashboardTableSurvey" style="width:965px; overflow:auto;">
<table id="mytableSurvey" style="border: 1px solid #468BBD; border-collapse:  collapse; width: 100%;  margin:0 auto; ">
<thead>
<tr style="border: 1px solid #468BBD;">
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
    </tr>
  </thead>
 <tbody>
<?php
while($row = mysqli_fetch_array($result2)){
?>

<tr>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
   </tr>
  <?}?>
 </tbody>
 </table>
</div>


<script type="text/javascript"  src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
 $(document).ready(function(){
 $('#mytableSurvey').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');
 });
}(jQuery));
</script>

同样，这些表格的格式或代码没有太大变化，但是有没有办法使用下拉列表来选择要显示的表格？

*****更新*****

新代码，不太有效:

<select name='tables' id='select-tables'>
  <option value="mytable">Survey Test Table</option>
  <option value="mytableSurvey">Survey Only</option>
</select>

<script>
(function($) {
   $('#select-tables').on('change', function(){
   var table = $(this).find('option:selected');
   $('#' + table).show();
   $('table').not('#' + table).hide();
});
}(jQuery));
</script>

我的表 ID 是 mytable 和 mytableSurvey，并且我已将 display:none 放入表的 css 中，但因为我正在使用数据表，所以它仍然显示数据表本身的页码和搜索选项。下拉列表未显示然而，每个选择。

Answer 1

    //In your css:

    table {
       display: none;
    }

        <div class="dashboardTable" style="width:965px; overflow:auto;">
    <select name='tables' id='select-tables'>
      <option value="table1">First Table</option>
      <option value="teble2">Second Table</option>
    </select>
        <table id="table1" style="border: 1px solid #468BBD; border-collapse: collapse; width: 100%;  margin:0 auto; ">
        <thead>
        <tr style="border: 1px solid #468BBD;">
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
            </tr>
            </thead>
        <tbody>

        <?php
          while($row = mysqli_fetch_array($result1)){
        ?>

        <tr>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
            </tr>
            <?}?>
           </tbody>
          </table>
<table id="table2" style="border: 1px solid #468BBD; border-collapse: collapse; width: 100%;  margin:0 auto; ">
        <thead>
        <tr style="border: 1px solid #468BBD;">
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
            </tr>
            </thead>
        <tbody>

        <?php
          while($row = mysqli_fetch_array($result1)){
        ?>

        <tr>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
            </tr>
            <?}?>
           </tbody>
          </table>
        </div>


        <script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
    <script>
    $('#select-tables').on('change', function(){
       var table = $(this).find('option:selected');
       $('#' + table).show();
       $('table').not('#' + table).hide();
    });
    </script>

不是那么优雅，但快速的解决方案。如果您想一次加载所有表。最好的性能是通过 ajax 获取它们:

在您的前端/ View 页面中:

$("#select-tables").change(function(){
  $.get("yourcodetogettables.php?table=" + $(this).find("option:selected").val(), function(data, status){
    //RETRIEVE YOUR HTML BY THAT YOURCODETOGETTABLES
    $(table).remove();
    $('body').append(data);
  });
});

在 PHP 代码中:回显该结构:

    <div class="dashboardTable" style="width:965px; overflow:auto;">
<select name='tables' id='select-tables'>
  <option value="table1">First Table</option>
  <option value="teble2">Second Table</option>
</select>
    <table id="table1" style="border: 1px solid #468BBD; border-collapse: collapse; width: 100%;  margin:0 auto; ">
    <thead>
    <tr style="border: 1px solid #468BBD;">
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
        </tr>
        </thead>
    <tbody>

    <?php
      while($row = mysqli_fetch_array($result1)){
    ?>

    <tr>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
        </tr>
        <?}?>
       </tbody>
      </table>
        </div>