按下拉列表切换表格行

问题描述 投票：0回答：4

我有一个静态的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

    });
});

Code Snippet

jquery html5 html-table
4个回答
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. 使用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>
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值

演示

$(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>
0
投票

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

此外，您不需要使用选择器来检索select值，因为它由select本身的dom填充。

$(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();
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.