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

Question

如何在一页上显示 2 个或更多表格，而当时只查看 1 个表格，您可以通过下拉菜单选择要显示的表格而无需按钮或刷新页面？有人有想法吗？至少我们需要使用 ajax/js。我为我的表使用数据表插件。这是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 属性，然后隐藏所有其他表。要获取我们要隐藏的所有表，请将其分组到类名下。

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>