Переключить строки таблицы в соответствии с раскрывающимся списком - PullRequest
Новая
       11

Переключить строки таблицы в соответствии с раскрывающимся списком

0 голосов
/ 19 марта 2019

У меня есть статическая таблица html5 с 4 строками. я хочу, чтобы при открытии отображалась только первая строка, а затем пользователь решил посмотреть, сколько строк в раскрывающемся списке.

HTML код: 

<label for="noOfChild"> No of children: </label>
<select class="childSelect">
   <option value="1" selected>one</option>
   <option value="2">two</option>
   <option value="3">three</option>
   <option value="4">three +</option>
</select>
<table id="table">
   <tr>
      <th>No. of Child accounts</th>
      <th>Online Price</th>
      <th>Program Price</th>
      <th class="align-right red">Subscription Saving (25%)</th>
   </tr>
   <tr>
      <td>One</td>
      <td class="align-right">£99.99</td>
      <td class="align-right">£74.99</td>
      <td class="align-right red">£25.00</td>
   </tr>
   <tr>
      <td>Two</td>
      <td class="align-right">£169.98</td>
      <td class="align-right">£127.48</td>
      <td class="align-right red">£42.50</td>
   </tr>
   <tr>
      <td>Three</td>
      <td class="align-right">£239.97</td>
      <td class="align-right">£179.97</td>
      <td class="align-right red">£60.00</td>
   </tr>
   <tr>
      <td>Three +</td>
      <td class="align-right">£239.97</td>
      <td class="align-right">£179.97</td>
      <td class="align-right red">£60.00</td>
   </tr>
</table>

, поскольку я не опытен в jquery, я написал базовую функцию, но не знаю, что делать сейчас

Код Jquery: 

$(document).ready(function(){
      $("select.childSelect").change(function(){
        var noOfChild = $(this).children("option:selected").val();
        //hide rows

    });
});

Фрагмент кода

Ответы [ 4 ]

2 голосов
/ 19 марта 2019 
 $(document).ready(function () {
        $("select.childSelect").change(function () {
            $('#table tr').hide();
            $('#table tr').eq(0).show();

            var noOfChild = $(this).children("option:selected").val();
            for(var i = 1; i <= noOfChild; i++){
                $('#table tr').eq(i).show();
            }
        });
    });

Демо

1 голос
/ 19 марта 2019

Вы можете попробовать следующий код: 

$(document).ready(function() {
  $("select.childSelect").change(function() {
    var noOfChild = (+$(this).val() + 1 );
    $("#table tr").hide();
    $("#table tr:lt("+noOfChild+")").show();
  });
});

Когда вы изменяете select, тогда он будет hide все tr, а затем show x сумму, соответствующую вашему select значению

демо 

$(document).ready(function() {
  $("select.childSelect").change(function() {
    var noOfChild = (+$(this).val() + 1 );
    $("#table tr").hide();
    $("#table tr:lt("+noOfChild+")").show();
  });
});
table tr {
  display: none;
}

table tr:first-of-type,table tr:first-of-type + tr {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="noOfChild"> No of children: </label>
<select class="childSelect">
  <option value="1" selected>one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">three +</option>
</select>
<table id="table">
  <tr>
    <th>No. of Child accounts</th>
    <th>Online Price</th>
    <th>Program Price</th>
    <th class="align-right red">Subscription Saving (25%)</th>
  </tr>
  <tr>
    <td>One</td>
    <td class="align-right">£99.99</td>
    <td class="align-right">£74.99</td>
    <td class="align-right red">£25.00</td>
  </tr>
  <tr>
    <td>Two</td>
    <td class="align-right">£169.98</td>
    <td class="align-right">£127.48</td>
    <td class="align-right red">£42.50</td>
  </tr>
  <tr>
    <td>Three</td>
    <td class="align-right">£239.97</td>
    <td class="align-right">£179.97</td>
    <td class="align-right red">£60.00</td>
  </tr>
  <tr>
    <td>Three +</td>
    <td class="align-right">£239.97</td>
    <td class="align-right">£179.97</td>
    <td class="align-right red">£60.00</td>
  </tr>
</table>
1 голос
/ 19 марта 2019
  1. Использовать lt-селектор

Описание: выбрать все элементы с индексом, который меньше индекса в соответствующем наборе.

  1. Добавьте данные в tbody и добавьте заголовок в thead таблицы, чтобы избежать путаницы 

$(document).ready(function() {
  $("select.childSelect").change(function() {
    $("#table tbody tr").hide();
    var noOfChild = $("option:selected", this).val();
    //hide rows
    $("#table tbody tr:lt(" + (noOfChild) + ")").show();
  }).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="noOfChild"> No of children: </label>
<select class="childSelect">
  <option value="1" selected>one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">three +</option>
</select>
<table id="table">
  <thead>
    <tr>
      <th>No. of Child accounts</th>
      <th>Online Price</th>
      <th>Program Price</th>
      <th class="align-right red">Subscription Saving (25%)</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>One</td>
      <td class="align-right">£99.99</td>
      <td class="align-right">£74.99</td>
      <td class="align-right red">£25.00</td>
    </tr>
    <tr>
      <td>Two</td>
      <td class="align-right">£169.98</td>
      <td class="align-right">£127.48</td>
      <td class="align-right red">£42.50</td>
    </tr>
    <tr>
      <td>Three</td>
      <td class="align-right">£239.97</td>
      <td class="align-right">£179.97</td>
      <td class="align-right red">£60.00</td>
    </tr>
    <tr>
      <td>Three +</td>
      <td class="align-right">£239.97</td>
      <td class="align-right">£179.97</td>
      <td class="align-right red">£60.00</td>
    </tr>
  </tbody>

</table>
0 голосов
/ 19 марта 2019

Как предлагается в других ответах, вы должны перебирать все строки, чтобы показать / скрыть.Если у вас много строк, вы можете выполнить итерацию один раз, проверив значение.

Кроме того, вам не нужно использовать селектор для получения значения select, так как оно заполняется dom в selectсам. 

$(document).ready(function() {
  $("select.childSelect").change(function() {
    var $trs = $('#table tr');
    var noOfChild = this.value;
    for (var i = 0, len = $trs.length; i < len; i++) {
      var $tr = $trs.eq(i);
      if (i <= noOfChild) {
        $tr.show();
      } else {
        $tr.hide();
      }
    }
  });
  $("select.childSelect").change();
});
.align-right {
  text-align: right;
}

.red {
  color: red;
}

table {
  border: 1px black solid;
}

table tr th {
  border-bottom: 1px #a1a1a1 solid;
}

table tr td,
table tr th {
  border-right: 1px #a1a1a1 solid;
}

table tr td:last-child,
table tr th:last-child {
  border-right: none;
}

table tr:first-child {
  display: table-row;
}

table#table tr:not(first-child) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<label for="noOfChild"> No of children: </label>
<select class="childSelect">
  <option value="1" selected>one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">three +</option>
</select>
<table id="table">
  <tr>
    <th>No. of Child accounts</th>
    <th>Online Price</th>
    <th>Program Price</th>
    <th class="align-right red">Subscription Saving (25%)</th>
  </tr>
  <tr>
    <td>One</td>
    <td class="align-right">£99.99</td>
    <td class="align-right">£74.99</td>
    <td class="align-right red">£25.00</td>
  </tr>
  <tr>
    <td>Two</td>
    <td class="align-right">£169.98</td>
    <td class="align-right">£127.48</td>
    <td class="align-right red">£42.50</td>
  </tr>
  <tr>
    <td>Three</td>
    <td class="align-right">£239.97</td>
    <td class="align-right">£179.97</td>
    <td class="align-right red">£60.00</td>
  </tr>
  <tr>
    <td>Three +</td>
    <td class="align-right">£239.97</td>
    <td class="align-right">£179.97</td>
    <td class="align-right red">£60.00</td>
  </tr>
</table>

Или, если вы хотите использовать селектор, вы можете заново разработать Карстен Левбо Андерсен ответить, изменив селектор скрытия 

$(document).ready(function() {
  $("select.childSelect").change(function() {
    var noOfChild = +this.value + 1;
    $("#table tr:gt(" + noOfChild + ")").hide();
    $("#table tr:lt(" + noOfChild +")").show();
  });
  $("select.childSelect").change();
});
...