87,904
社区成员
发帖
与我相关
我的任务
分享关于JS如何做多条件筛选的问题
如表格中有2个文本框和一个下拉框，下拉框是“男” 和“女” ，第一个文本框是我想在输入 “张” 以后， 点击搜索就在姓名那一列查找出包含 “张” 字 的所有信息，比如说“XX张”“X张X”"张XX" 千万不要像百度搜索一样的有下拉的，不要那种！还有1个文本框就是我输入“物理”之后，就能找到有“张”字的“物理”的信息。也可以不输入姓名和课程，下拉选择“男”或“女”找到“男”或“女”的信息，可以单个条件查找，或多个条件查找，查找完之后移除其他不想关的信息，如果条件都不符合，就显示没有匹配结果。求用JavaScript代码写，不要用Jquery 急急急，求教万分感谢。
性别：<select id="sex">
<option>男</option>
<option>女</option>
</select>
姓名：<input type="text" id="name"/>
课程：<input type="text" id="course"/>
<input type="botton" id="search" value="搜索"/>
<table>
<tr>
<th>性别</th>
<th>姓名</th>
<th>课程</th>
</tr>
<tr>
<td>男</td>
<td>张三</td>
<td>物理</td>
</tr>
<tr>
<td>女</td>
<td>王张张</td>
<td>化学</td>
</tr>
<tr>
<td>男</td>
<td>胡标张</td>
<td>物理</td>
</tr>
<tr>
<td>女</td>
<td>王五</td>
<td>数学</td>
</tr>
</table>
性别：<select id="sex">
<option>男</option>
<option>女</option>
</select>
姓名：<input type="text" id="name"/>
课程：<input type="text" id="course"/>
<input type="botton" id="search" value="搜索"/>
<table>
<tr>
<th>性别</th>
<th>姓名</th>
<th>课程</th>
</tr>
<tr>
<td>男</td>
<td>张三</td>
<td>物理</td>
</tr>
<tr>
<td>女</td>
<td>王张张</td>
<td>化学</td>
</tr>
<tr>
<td>男</td>
<td>胡标张</td>
<td>物理</td>
</tr>
<tr>
<td>女</td>
<td>王五</td>
<td>数学</td>
</tr>
</table>
...全文
请发表友善的回复…
发表回复
qq_33619690 2016-01-04
- 打赏
- 举报
大神能不能给我写个js筛选程序急用
打字员 2015-05-20
- 打赏
- 举报
小伙子，以后要好好學習，不要總是LOL，小心找不到妞！
要知道單身狗這種無甲單位......
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>test</title>
<style type="text/css">
tr.hide,tr.hide td{display:none;}
</style>
</head>
<body>
性别：<select id="sex">
<option value="">不限</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
姓名：<input type="text" id="name"/>
课程：<input type="text" id="course"/>
<input type="button" id="search" value="搜索" onclick="search()" />
<br>
<table>
<thead>
<tr>
<th>性别</th>
<th>姓名</th>
<th>课程</th>
</tr>
</thead>
<tbody>
<tr>
<td>男</td>
<td>张三</td>
<td>物理</td>
</tr>
<tr>
<td>女</td>
<td>王张张</td>
<td>化学</td>
</tr>
<tr>
<td>男</td>
<td>胡标张</td>
<td>物理</td>
</tr>
<tr>
<td>女</td>
<td>王五</td>
<td>数学</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function filter(fn) {
var list = document.getElementsByTagName('table')[0].getElementsByTagName('tbody')[0].rows;
var size = list.length;
var tr;
for(var i = 0; i < size; i++) {
tr = list[i];
tr.removeAttribute('class', 'hide')
if(!fn(tr)) {
tr.setAttribute('class', 'hide');
}
}
}
function value(id) {
return document.getElementById(id).value;
}
function search() {
var sex = document.getElementById('sex').value;
var name = document.getElementById('name').value;
var course = document.getElementById('course').value;
filter(function(tr) {
if(sex && tr.cells[0].innerHTML != sex) {
return false;
}
if(name && tr.cells[1].innerHTML.indexOf(name) < 0) {
return false;
}
if(course && tr.cells[2].innerHTML.indexOf(course) < 0) {
return false;
}
return true;
});
}
</script>
</body>
</html>
jiawei_zeng 2015-05-20
- 打赏
- 举报
有没有人帮帮忙！苦恼中
