通过选择框选项交换表
Swap table via select box option
希望用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/尝试使用jQuery show() and 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>不确定我是否理解正确，但这将有所帮助。
$(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>添加这个jquery
$('#table2').hide();
$('select').change(function(){
$('table').hide();
$('#' + $(this).val()).show();
});
选择显示第二个表的option2，试试这个演示
$('#tableSwapper').change(function() {
var optionValue = $(this).val();
if(optionValue == "table1") {
$('#table1').show();
}
else{
$('#table1').hide();
}
if(optionValue == "table2") {
$('#table2').show();
}
else{
$('#table2').hide();
}
})
你可以使用jQuery的。toggle()来切换表格的可见性。
像这样;http://jsfiddle.net/apn1eLam/
$( document ).ready(function() {
$('#table2').toggle();
});
$('#tableSwapper').on('change', function() {
//alert( this.value );
$('#'+this.value).toggle();
});相关文章：
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- JQuery覆盖不更改单选选项
- 活动选项卡's源代码-获取变量s值
- 绑定时将Parsley minlength消息作为选项传递时，未对其进行自定义
- 在选择Harvest Chosen选择框之间交换选项
- 如何根据 jquery 中的选定选项卡交换选项卡名称
- 如何:使用地址与 jQuery 交换选项
- 如何:在使用jQuery UI时与jQuery交换选项
- 通过选择框选项交换表
