通过选择框选项交换表

时间：2015-06-09 04:30:03

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

希望用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/

5 个答案:

答案 0 :(得分：0)

选择显示第二个表格的选项2，试试这个Demo 

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

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

只需添加此jquery 

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

答案 3 :(得分：0)

尝试jQuery show（）和hide（）：

＆＃13;
＆＃13; 
$(function() {
  $('#tableSwapper').on('change', function() {
    $('table[id^=table]').hide();
    $('#' + $(this).val()).show();
  });
});
＆＃13; 
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 */
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

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

像这样的东西; http://jsfiddle.net/apn1eLam/

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

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

相关问题
最新问题