根据下拉选项显示行

时间：2016-08-23 11:41:32

标签： javascript jquery html

我目前正在尝试创建表单，但我仍然坚持Javascript和Jquery的新手。以下是我正在使用的HTML

我想要实现的是，当用户选择0时，没有显示任何行，如果他选择1作为下拉选项，则数字为1行，如果他选择2作为下拉选项，则数字1和数字2行显示和选择3行编号1，行编号2和行编号3显示等等...

你可以帮我编写Javasript或jquery吗？

＆＃13;
＆＃13; 
Number of siblings   
<select name="siblingnum">
  <option>select one</option>
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>
<br>
<br>
<table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;">Number<br></td>
      <td style="vertical-align: top;">Name<br></td>
      <td style="vertical-align: top;">Birthdate<br></td>
      <td style="vertical-align: top;">Class<br></td>
      <td style="vertical-align: top;">Gender<br></td>
      <td style="vertical-align: top;">Schoolname<br></td>
    </tr>
    <tr>
      <td style="vertical-align: top;">1<br></td>
      <td style="vertical-align: top;"><input name="name1"><br></td>
      <td style="vertical-align: top;"><input name="date1"></td>
      <td style="vertical-align: top;"><input name="class1"></td>
      <td style="vertical-align: top;"><input name="g1"></td>
      <td style="vertical-align: top;"><input name="sname1"></td>
    </tr>
    <tr>
      <td style="vertical-align: top;">2<br></td>
      <td style="vertical-align: top;"><input name="name2"></td>
      <td style="vertical-align: top;"><input name="date2"></td>
      <td style="vertical-align: top;"><input name="class2"></td>
      <td style="vertical-align: top;"><input name="g2"></td>
      <td style="vertical-align: top;"><input name="sname2"></td>
    </tr>
    <tr>
      <td style="vertical-align: top;">3<br></td>
      <td style="vertical-align: top;"><input name="name3"></td>
      <td style="vertical-align: top;"><input name="date3"></td>
      <td style="vertical-align: top;"><input name="class3"></td>
      <td style="vertical-align: top;"><input name="g3"></td>
      <td style="vertical-align: top;"><input name="sname3"></td>
    </tr>
    <tr>
      <td style="vertical-align: top;">4<br></td>
      <td style="vertical-align: top;"><input name="name4"></td>
      <td style="vertical-align: top;"><input name="date4"></td>
      <td style="vertical-align: top;"><input name="class4"></td>
      <td style="vertical-align: top;"><input name="g4"></td>
      <td style="vertical-align: top;"><input name="sname4"></td>
    </tr>
    <tr>
      <td style="vertical-align: top;">5<br></td>
      <td style="vertical-align: top;"><input name="name5"></td>
      <td style="vertical-align: top;"><input name="date5"></td>
      <td style="vertical-align: top;"><input name="class5"></td>
      <td style="vertical-align: top;"><input name="g5"></td>
      <td style="vertical-align: top;"><input name="sname5"></td>
    </tr>
    <tr>
      <td style="vertical-align: top;">6<br></td>
      <td style="vertical-align: top;"><input name="name6"></td>
      <td style="vertical-align: top;"><input name="date6"></td>
      <td style="vertical-align: top;"><input name="class6"></td>
      <td style="vertical-align: top;"><input name="g6"></td>
      <td style="vertical-align: top;"><input name="sname6"></td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

将tbody和thead中的tbody分开，使其不那么复杂。然后在change回调中使用它们。使用filter和:lt，您可以按index选择元素。应该很容易理解。

$("select").change(function() {
    var rows = $("tbody tr").hide();
    var value = $(this).val();
    
    if( $.isNumeric(value) ) {
        rows.filter(":lt(" + value + ")").show();
    }
});
tbody tr {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="siblingnum">
  <option>select one</option>
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>


<table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2">
  <thead>
    <tr>
      <th style="vertical-align: top;">Number
        <br>
      </th>
      <th style="vertical-align: top;">Name
        <br>
      </th>
      <th style="vertical-align: top;">Birthdate
        <br>
      </th>
      <th style="vertical-align: top;">Class
        <br>
      </th>
      <th style="vertical-align: top;">Gender
        <br>
      </th>
      <th style="vertical-align: top;">Schoolname
        <br>
      </th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td style="vertical-align: top;">1
        <br>
      </td>
      <td style="vertical-align: top;">
        <input name="name1">
        <br>
      </td>
      <td style="vertical-align: top;">
        <input name="date1">
      </td>
      <td style="vertical-align: top;">
        <input name="class1">
      </td>
      <td style="vertical-align: top;">
        <input name="g1">
      </td>
      <td style="vertical-align: top;">
        <input name="sname1">
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;">2
        <br>
      </td>
      <td style="vertical-align: top;">
        <input name="name2">
      </td>
      <td style="vertical-align: top;">
        <input name="date2">
      </td>
      <td style="vertical-align: top;">
        <input name="class2">
      </td>
      <td style="vertical-align: top;">
        <input name="g2">
      </td>
      <td style="vertical-align: top;">
        <input name="sname2">
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;">3
        <br>
      </td>
      <td style="vertical-align: top;">
        <input name="name3">
      </td>
      <td style="vertical-align: top;">
        <input name="date3">
      </td>
      <td style="vertical-align: top;">
        <input name="class3">
      </td>
      <td style="vertical-align: top;">
        <input name="g3">
      </td>
      <td style="vertical-align: top;">
        <input name="sname3">
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;">4
        <br>
      </td>
      <td style="vertical-align: top;">
        <input name="name4">
      </td>
      <td style="vertical-align: top;">
        <input name="date4">
      </td>
      <td style="vertical-align: top;">
        <input name="class4">
      </td>
      <td style="vertical-align: top;">
        <input name="g4">
      </td>
      <td style="vertical-align: top;">
        <input name="sname4">
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;">5
        <br>
      </td>
      <td style="vertical-align: top;">
        <input name="name5">
      </td>
      <td style="vertical-align: top;">
        <input name="date5">
      </td>
      <td style="vertical-align: top;">
        <input name="class5">
      </td>
      <td style="vertical-align: top;">
        <input name="g5">
      </td>
      <td style="vertical-align: top;">
        <input name="sname5">
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;">6
        <br>
      </td>
      <td style="vertical-align: top;">
        <input name="name6">
      </td>
      <td style="vertical-align: top;">
        <input name="date6">
      </td>
      <td style="vertical-align: top;">
        <input name="class6">
      </td>
      <td style="vertical-align: top;">
        <input name="g6">
      </td>
      <td style="vertical-align: top;">
        <input name="sname6">
      </td>
    </tr>
  </tbody>
</table>

答案 1 :(得分：-1)

使用jQuery，只需在更改选择时获取选择值，然后通过foreach循环隐藏不需要的行

$( document ).ready(function() {
    $( "select" ).change(function () {
        var val = $( "select" ).val();
        if (val != 'select one') {
            var tableRows = $("table tr");
            jQuery.each(tableRows, function(i ,tr) {
                if (i > val) {
                    $(tr).hide();
                } else {
                    $(tr).show();
                }
            })
        }
      }
    )
});

答案 2 :(得分：-3)

试试此代码

$(document).ready(function() {
    $("select[name='siblingnum']").change(function() {
        $( "tr" ).show();
        var selectValue = eval($(this).val());  
        $( "tr:gt("+selectValue+")" ).hide();
    });
});
相关问题
最新问题