通过 select 框选项交换 table

Question

想要用 Javascript 函数交换多个 table，我尝试的每一个都坏得很厉害。我希望第一个 table 在页面加载时显示，然后在选择不同选项时加载其余部分。

如有任何帮助，我们将不胜感激！

基本代码如下：

<select id="tableSwapper">
    <option value="table1">Table 1</option>
    <option value="table2">Table 2</option>
</select>

<table id="table1" class="table table-bordered box" >
    <thead>
        <tr>
            <th>Points</th>
            <th>ARS</th>
            <th>ASV</th>
            <th>BUR</th>
            <th>CHE</th>
            <th>CRY</th>
            <th>EVE</th>
            <th>HUL</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>02</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>  
        </tr>
        <tr>
            <td>03</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>04</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>05</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
    </tbody>
</table>
</div>

<table id="table2" class="table table-bordered box" >
    <thead>
        <tr>
            <th>TEAM</th>
            <th>ARS</th>
            <th>ASV</th>
            <th>BUR</th>
            <th>CHE</th>
            <th>CRY</th>
            <th>EVE</th>
            <th>HUL</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>02</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>   
        </tr>
        <tr>
            <td>03</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td> 
        </tr>
        <tr>
            <td>04</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>05</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>  
        </tr>
    </tbody>
</table>

这是基本设置的 link：

http://jsfiddle.net/xrjaar6g/

Answer 1

选择选项 2 显示第二个 table，试试这个 Demo

$('#tableSwapper').change(function() {
    var optionValue = $(this).val();
    if(optionValue == "table1") {
        $('#table1').show();
    }
    else{
        $('#table1').hide();
    }
    if(optionValue == "table2") {
        $('#table2').show();
    }
    else{
        $('#table2').hide();
    }   
})

Answer 2

不确定我是否理解正确，但这会有所帮助。

$(document).ready(function() {

  $('#tableSwapper').change(function() {
    $('.table').hide();
    $('#' + $(this).val()).show();
  });

});

thead {
  background-color: black;
  color: white;
}
table,
th,
tr,
td {
  text-align: center;
}
table {
  margin-top: 10px;
}
#table2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="tableSwapper">
  <option value="table1">Table 1</option>
  <option value="table2">Table 2</option>
</select>


<table id="table1" class="table table-bordered box">
  <thead>
    <tr>
      <th>Points</th>
      <th>ARS</th>
      <th>ASV</th>
      <th>BUR</th>
      <th>CHE</th>
      <th>CRY</th>
      <th>EVE</th>
      <th>HUL</th>

    </tr>
  </thead>
  <tbody>


    <tr>
      <td>01</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>02</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>03</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>04</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>05</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>

  </tbody>
</table>
</div>


<table id="table2" class="table table-bordered box">
  <thead>
    <tr>
      <th>TEAM</th>
      <th>ARS</th>
      <th>ASV</th>
      <th>BUR</th>
      <th>CHE</th>
      <th>CRY</th>
      <th>EVE</th>
      <th>HUL</th>

    </tr>
  </thead>
  <tbody>


    <tr>
      <td>01</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>02</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>03</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>04</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>05</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>

  </tbody>
</table>

Answer 3

只需添加此 jquery

$('#table2').hide();
$('select').change(function(){
    $('table').hide();
    $('#' + $(this).val()).show();
});

Answer 4

尝试 jQuery show() 和 hide()：

$(function() {
  $('#tableSwapper').on('change', function() {
    $('table[id^=table]').hide();
    $('#' + $(this).val()).show();
  });
});

thead {
  background-color: black;
  color: white;
}
table,
th,
tr,
td {
  text-align: center;
}
table {
  margin-top: 10px;
}
#table2 {
  display: none; /* hide the second table on page load */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="tableSwapper">
  <option value="table1">Table 1</option>
  <option value="table2">Table 2</option>
</select>


<table id="table1" class="table table-bordered box">
  <thead>
    <tr>
      <th>Points</th>
      <th>ARS</th>
      <th>ASV</th>
      <th>BUR</th>
      <th>CHE</th>
      <th>CRY</th>
      <th>EVE</th>
      <th>HUL</th>

    </tr>
  </thead>
  <tbody>


    <tr>
      <td>01</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>02</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>03</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>04</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>05</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>

  </tbody>
</table>
</div>


<table id="table2" class="table table-bordered box">
  <thead>
    <tr>
      <th>TEAM</th>
      <th>ARS</th>
      <th>ASV</th>
      <th>BUR</th>
      <th>CHE</th>
      <th>CRY</th>
      <th>EVE</th>
      <th>HUL</th>

    </tr>
  </thead>
  <tbody>


    <tr>
      <td>01</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>02</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>03</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>04</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>05</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>

  </tbody>
</table>

Answer 5

您可以使用 jQuery 的 .toggle() 来切换表格的可见性。

像这样； http://jsfiddle.net/apn1eLam/

$( document ).ready(function() {
    $('#table2').toggle();
});

$('#tableSwapper').on('change', function() {
  //alert( this.value );
  $('#'+this.value).toggle();
});

通过 select 框选项交换 table

Swap table via select box option

javascript

jquery

swap

html-table

twitter-bootstrap