Поменять таблицу через опцию выбора

Question

Поменять таблицу через опцию выбора

Глядя, чтобы поменять несколько таблиц с помощью функции 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/

0

javascript jquery twitter-bootstrap html-table swap

Источник

user3188120 09 июн '15 в 04:30

5 ответов

Решение

Выбрав вариант 2, показывающий вторую таблицу, попробуйте эту демонстрацию

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

0

Источник

user2949458 09 июн '15 в 04:38

Не уверен, правильно ли я понял, но это поможет.

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

0

Источник

user4431841 09 июн '15 в 04:40

Просто добавьте этот jquery

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

0

Источник

user3704297 09 июн '15 в 04:40

Вы можете использовать.toggle() jQuery для переключения видимости таблиц.

Что-то вроде этого; http://jsfiddle.net/apn1eLam/

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

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

0

Источник

user2434433 09 июн '15 в 04:41

Другие вопросы по тегам javascript jquery twitter-bootstrap html-table swap

user2575725 09 июн '15 в 04:40 2015-06-09 04:40 · Accepted Answer · 2015-06-09 04:40

Попробуйте 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>