按下拉列表行

时间：2019-03-19 08:35:20

标签： jquery html5 html-table

我有一个包含4行的静态html5表。我只想显示打开时的第一行，然后用户决定从下拉列表中查看多少行。

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

    });
});

Code Snippet

4 个答案:

答案 0 :(得分：2)

 $(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();
            }
        });
    });

Demo

答案 1 :(得分：1)

  1. 使用lt-selector
  

说明：选择索引中小于匹配集中索引的所有元素。

  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>

答案 2 :(得分：1)

您可以尝试以下代码：

$(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值的金额< / p>

演示 

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

答案 3 :(得分：0)

根据其他答案的建议，您必须迭代所有行以显示/隐藏。如果您有很多行，则可以通过检查值来迭代一次。

此外，您不需要使用选择器来检索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>

或者，如果您要使用选择器，则可以通过更改隐藏选择器来重新制定Carsten Løvbo Andersen答案

$(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();
});
相关问题
最新问题