显示行取决于下拉选项
我目前正在尝试创建表单,但我坚持一点是新手到Javascript和jquery。下面是我使用的HTML显示行取决于下拉选项
我想要实现的是,当用户选择0没有行显示,如果他选择1作为下拉选项数1行,如果他选择2作为下拉选项两个第1行和第2行显示并选择第3行第1行第2行和第3行显示等等......
你可以帮我一起编写Javasript还是jQuery?
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>
页使用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();
}
})
}
}
)
});
分裂您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>
不会产生预期的行为 – charlietfl
现在纠正@charlietfl请删除downvote! Thx提示。 – eisbehr
需要试试这个代码
$(document).ready(function() {
$("select[name='siblingnum']").change(function() {
$("tr").show();
var selectValue = eval($(this).val());
$("tr:gt("+selectValue+")").hide();
});
});
行
请显示您的尝试。这不是一个代码写入服务。您需要展示您解决问题的尝试,这里的人帮助您解决该问题。 – charlietfl
到目前为止您尝试了什么?你的问题被标记为javascript,但是你的问题中没有javascript – baao
欢迎来到SO。请访问[帮助]并参加[导览],查看要询问的内容和方法。现在你的问题是脱离主题,因为没有实际的effor或代码 – mplungjan