如何修改JS实现仅根据下拉选项显示指定三个表格？

算力阿峰

2026-7-3

问题解决：仅控制指定表格的显示与隐藏

问题分析

当前JavaScript代码会隐藏页面上所有带adv-table类的表格，但页面中存在其他无关表格，需要调整代码仅控制下拉选择器对应的三个表格。同时HTML中存在ID不一致的问题，会导致选择后无法正确显示对应表格，需先修正。

步骤1：修正HTML中的ID错误

第一个表格的容器DIV ID为femmeEnceint，与下拉选项值femmeEnceinte不匹配，需改为femmeEnceinte
第三个表格的容器DIV有重复ID（divautres和autre），且与下拉选项值autres不匹配，需改为autres
下拉选项中Personnel的value是personnels，但表格ID是personnel，需统一为personnel（修改下拉选项值）

修正后的关键片段：

<!-- 下拉选项修正 -->
<option value="personnel">Personnel</option>

<!-- 第一个表格容器修正 -->
<div class="adv-table editable-table " id="femmeEnceinte" style="display: none">

<!-- 第三个表格容器修正 -->
<div class="adv-table editable-table " id="autres">

步骤2：修改JavaScript代码

方案一：直接指定目标表格ID列表

通过硬编码目标表格的ID，仅对这三个表格进行隐藏操作，不影响其他adv-table元素：

function showTable() {
    // 定义需要控制的表格ID列表
    const targetTableIds = ['femmeEnceinte', 'personnel', 'autres'];
    
    // 隐藏所有目标表格
    targetTableIds.forEach(id => {
        const table = document.getElementById(id);
        if (table) table.style.display = 'none';
    });
    
    // 显示选中的表格，排除默认SELECT选项
    const selectedTableId = document.getElementById("tableSelector").value;
    if (selectedTableId !== 'select') {
        const selectedTable = document.getElementById(selectedTableId);
        if (selectedTable) selectedTable.style.display = 'block';
    }
}

方案二：添加专属类选择器（更易扩展）

给三个目标表格容器添加专属类category-switch-table，后续通过这个类精准选择元素：

修改表格容器的HTML：

<div class="adv-table editable-table category-switch-table" id="femmeEnceinte" style="display: none">
<div class="adv-table editable-table category-switch-table" id="personnel" style="display: none">
<div class="adv-table editable-table category-switch-table" id="autres">

修改JavaScript：

function showTable() {
    // 仅隐藏带专属类的表格
    const targetTables = document.getElementsByClassName('category-switch-table');
    for (let i = 0; i < targetTables.length; i++) {
        targetTables[i].style.display = 'none';
    }
    
    // 显示选中的表格，排除默认选项
    const selectedTableId = document.getElementById("tableSelector").value;
    if (selectedTableId !== 'select') {
        const selectedTable = document.getElementById(selectedTableId);
        if (selectedTable) selectedTable.style.display = 'block';
    }
}

完整修正后的代码示例

下拉选择器部分

<?php if (!$this->ion_auth->in_group(array('Patient'))) { ?>
<li class="">
 <div>
    <label for="exampleInputEmail1"><?php echo lang('categorie'); ?></label>
    <select id="tableSelector" onchange="showTable()" class="form-control">
       <option value="select">SELECT</option>
       <option value="femmeEnceinte">Femme enceinte</option>
       <option value="personnel">Personnel</option>
       <option value="autres">Autres</option>
     </select> 
 </div>       
</li>
<?php } ?>

表格部分

<?php if (!$this->ion_auth->in_group(array('Patient'))) { ?>
   <div id="femmeEnceinte" class="tab-pane"> <div class="">

<!--First  table (femmeEnceinte) start-->
<div class="adv-table editable-table category-switch-table" id="femmeEnceinte" style="display: none">
<table class="table table-striped table-hover table-bordered" id="table_femmeE">
   <thead>
      <tr>
         <th><?php echo lang('patient_id'); ?></th>                        
         <th><?php echo lang('name'); ?></th>
         <th><?php echo lang('cas'); ?></th>
         <th><?php echo lang('birth_date'); ?></th>
         <th><?php echo lang('address'); ?></th>
 <?php if ($this->ion_auth->in_group(array('Doctor', 'admin', 'Receptionist'))) { ?>
         <th><?php echo lang('department'); ?></th>
         <th><?php echo lang('sex'); ?></th>
 <?php } ?>
    </tr>
 </thead>
 <tbody>
     <style>
        .img_url{
            height:20px;
            width:20px;
            background-size: contain; 
            max-height:20px;
            border-radius: 100px;
         }
     </style>
<?php foreach ($patients as $patient) { ?>
   <tr class="">
      <td><?php echo $patient->id; ?></td>
      <td><?php echo $patient->name; ?></td>
      <td><?php echo $patient->phone; ?></td>
      <td><?php echo $patient->birthdate; ?></td>
      <td><?php echo $patient->address; ?></td>
<?php if ($this->ion_auth->in_group(array('Doctor', 'admin', 'Receptionist'))) { ?>
      <td><?php echo "Département"; // echo " "; $patient->department                             ?></td>
      <td> <?php echo $patient->sex; ?></td>
  <?php } ?>
 </tr>
 <?php } ?>
 </tbody>
</table>
</div>
<!--first table (femmeEnceinte) end-->

<!--second table (personnel) start-->
<div class="adv-table editable-table category-switch-table" id="personnel" style="display: none">
     <table class="table table-striped table-hover table-bordered" id="editable-sample">
     <thead>
          <tr>
            <th><?php echo lang('patient_id'); ?></th>                        
            <th><?php echo lang('name'); ?></th>
            <th><?php echo lang('phone'); ?></th>
<?php if ($this->ion_auth->in_group(array('admin', 'Accountant', 'Receptionist'))) { ?>
            <th><?php echo lang('sex'); ?></th>
<?php } ?>
            <th class="no-print"><?php echo lang('options'); ?></th>
          </tr>
       </thead>
       <tbody>
           <style>
              .img_url{
                 height:20px;
                 width:20px;
                 background-size: contain; 
                 max-height:20px;
                 border-radius: 100px;
              }
           </style>
       </tbody>
    </table>
 </div>
<!--Second table (personnel) end-->

<!--Third table (autres) start-->
<div class="adv-table editable-table category-switch-table" id="autres">
   <table class="table table-striped table-hover table-bordered" id="table_autres">
     <thead>
       <tr>
         <th><?php echo lang('patient_id'); ?></th>                        
         <th><?php echo lang('name'); ?></th>
         <th><?php echo lang('cas'); ?></th>
         <th><?php echo lang('birth_date'); ?></th>
         <th><?php echo lang('address'); ?></th>
         <th><?php echo lang('sex'); ?></th>
        </tr>
      </thead>
      <tbody>
       <style>
         .img_url{
            height:20px;
            width:20px;
            background-size: contain; 
            max-height:20px;
            border-radius: 100px;
          }
       </style>
         <?php foreach ($patients as $patient) { ?>
            <tr class="">
              <td><?php echo $patient->id; ?></td>
              <td><?php echo $patient->name; ?></td>
              <td><?php echo $patient->phone; ?></td>
              <td><?php echo $patient->birthdate; ?></td>
              <td><?php echo $patient->address; ?></td>
              <td> <?php echo $patient->sex; ?></td>
            </tr>
         <?php } ?>
      </tbody>
     </table>
</div>
<!--Third table (autre) end-->

 </div>
 </div>
<?php } ?>

JavaScript代码（方案二）

function showTable() {
    // 仅隐藏带专属类的表格
    const targetTables = document.getElementsByClassName('category-switch-table');
    for (let i = 0; i < targetTables.length; i++) {
        targetTables[i].style.display = 'none';
    }
    
    // 显示选中的表格，排除默认选项
    const selectedTableId = document.getElementById("tableSelector").value;
    if (selectedTableId !== 'select') {
        const selectedTable = document.getElementById(selectedTableId);
        if (selectedTable) selectedTable.style.display = 'block';
    }
}

内容的提问来源于stack exchange，提问作者DELARUELLE LUMBIDI

如何修改JS实现仅根据下拉选项显示指定三个表格？

问题分析 #

步骤1：修正HTML中的ID错误 #

步骤2：修改JavaScript代码 #

方案一：直接指定目标表格ID列表 #

方案二：添加专属类选择器（更易扩展） #

完整修正后的代码示例 #

下拉选择器部分 #

表格部分 #

JavaScript代码（方案二） #