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

Question

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

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

Answer 1

您可以使用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(); 
        });
    });

Answer 2

您可以通过制作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>

如果您有两个以上的表，则可以通过添加一个类来完成

function display(val){
var el = document.getElementsByClassName("allTables");
for(i=0; i<el.length; i++) {
   el[i].style.display = "none";
  }
  document.getElementById(val).style.display = "block";
}

.allTables{
display:none;
}

#table1{
display:block;
}

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

<table border='1' id="table1"  class="allTables">
  <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="allTables">
  <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>

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

Answer 3

最初设置要显示的任何一个表，并使所有其他表隐藏。然后将选定的表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>