通过选择框选项交换表答案

【问题标题】：Swap table via select box option通过选择框选项交换表
【发布时间】：2015-08-23 17:45:27
【问题描述】：

希望使用 Javascript 函数交换多个表，但我尝试的每一个表都非常糟糕。我希望在页面加载时显示第一个表格，然后选择其他选项加载其余表格。

任何帮助将不胜感激！

这是基本代码：

<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>

这是基本设置的链接：

http://jsfiddle.net/xrjaar6g/

【问题讨论】：

标签： javascript jquery twitter-bootstrap html-table swap

【解决方案1】：

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

类似这样的东西； http://jsfiddle.net/apn1eLam/

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

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

【讨论】：

【解决方案2】：

选择 option2 显示第二个表，试试这个Demo

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

【讨论】：

这肯定显示了第二个表，但第一个仍然可见，所以它没有像这样“交换”它。
@stanze 你自己和其他人都选择了 .show() .hide() 但我选择了 .toggle() .toggle() 有什么问题吗？

【解决方案3】：

试试 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>

【讨论】：

这很好用 - 非常感谢！

【解决方案4】：

只需添加这个 jquery

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

【讨论】：

【解决方案5】：

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

$(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>

【讨论】：