如何通过下拉菜单查看多个表？

Posted 2021-05-03

我怎样才能在1页上有2个或更多表，当时只用下表菜单查看1个表，您选择在没有按钮或刷新页面的情况下显示哪个表？有没有人有想法？至少我们需要使用ajax / js。我为我的表使用datatables插件。这是一个Fiddle

<select>
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>

答案

您可以使用jquery hide / show方法执行相同操作。

请看看fiddle

下面的代码处理表的显示/隐藏

$(function() {

    $('#table1').wrap('<div id="hidetable1" class="hide" style="display:none"/>');
    $('#table2').wrap('<div id="hidetable2" class="hide"  style="display:none"/>');
    $('#table3').wrap('<div id="hidetable3"  class="hide" style="display:none"/>');

    $('#table1').DataTable( {
      "searching": true
    } );
    $('#table2').DataTable( {
      "searching": true
    } );
    $('#table3').DataTable( {
      "searching": true
    } );
    console.log($("#drop"))
    $("#hide"+ $("#drop")[0].value).show(); 
       $("#drop").change(function () {
            var end = this.value;
            $('.hide').hide();
           $("#hide"+end).show(); 
        });
    });

另一答案

您可以通过制作onchange函数，将ids提供给表并根据此值显示表来实现

function display(val){
document.getElementById(val).style.display = "block";
val== "table1"?document.getElementById("table2").style.display = "none":document.getElementById("table1").style.display = "none";;
}

#table2{
display:none;
}

<select onchange = "display(this.value)">
<option value='table1' selected>table1</option>
<option value='table2'>table2</option>
</select>

<table border='1' id="table1">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>john</td>
      <td>Edit</td>
      <td>Delete</td>
    </tr>
  </tbody>
</table>


<table border='1' id="table2">
  <thead>
    <tr>
      <th>ID</th>
      <th>type</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Male</td>
      <td>Edit</td>
      <td>Delete</td>
    </tr>
  </tbody>
</table>

另一答案

最初设置要显示的任何一个表，并使所有其他表隐藏。然后将选定的表id传递给onchange propery，然后隐藏所有其他表。要获取我们要隐藏的所有表，请将其分组到类名下。

function show(){
var selectedTable= document.getElementById("drp").value;

    var elements = document.getElementsByClassName('tableClass')

    for (var i = 0; i < elements.length; i++){
    if(elements[i].id==selectedTable)
    elements[i].style.display = '';
    else
        elements[i].style.display = 'none';
    }

}

<select onchange="show(value)" id="drp">
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>

</br></br>

<table  border='1' id="table1" class="tableClass">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>john</td>
        <td>Edit</td>
        <td>Delete</td>
    </tr>
    </tbody>
</table>


<table  border='1' id="table2" class="tableClass" style="display:none;">
    <thead>
    <tr>
        <th>ID</th>
        <th>type</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Male</td>
        <td>Edit</td>
        <td>Delete</td>
    </tr>
    </tbody>
</table>

以上是关于如何通过下拉菜单查看多个表？的主要内容，如果未能解决你的问题，请参考以下文章

plsql怎么查看所有表？

如何通过单选菜单组合多个 Google CSE？

如何使用mysql和php制作级联下拉列表

从单个按钮从多个片段中提取数据

jquery隐藏表格中的额外下拉菜单

如何查看 Ajax 传递给 PHP 的数据以及 PHP 对数据的作用 - 下拉菜单选项