window.onload = function(){ var btn = document.getElementById("btn"); var table = document.getElementById("firstTable"); var tbody = table.tBodies[0]; btn.onclick = function(){ // 取得姓名值 var name = document.getElementById("name").value.toLowerCase(); var patten = /\s+/igm; var nameArray = name.split(patten); console.log(nameArray); // 对tbody中的每一行进行循环 for (var i = 0; i < tbody.rows.length; i++) { var inputTxt = tbody.rows[i].cells[1].innerHTML.toLowerCase(); tbody.rows[i].style.display = "none"; // 对我们输入的搜索条件进行循环 for (var j = 0; j < nameArray.length; j++) { if(inputTxt.indexOf(nameArray[j]) != -1){ tbody.rows[i].style.display = "table-row"; } } } } }
就是点击男的时候只出现男的,点女选项的时候就出现女的,帮帮忙。。- -
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table</title>
<style type="text/css" media="screen">
table {
border:1px solid #9e9e9e;
border-collapse: collapse;
width: 500px;
}
tr,th,td {
border:1px solid #9e9e9e;
text-align: center;
}
select{
}
</style>
<script src="tab.js" type="text/javascript"></script>
</head>
<body>
<div>
<label for="name">请输入姓名:</label>
<input type="text" name="" id="name" placeholder="请输入姓名进行搜索...">
<!-- <label for="age">请输入年龄:</label>
<input type="text" name="" id="age"> -->
<input type="button" name="" id="btn" value="搜索">
<select id="sel">
<option value="性别">性别</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<table id="firstTable">
<caption>学生信息表</caption>
<thead>
<tr>
<th>id号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
<td>男</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>张明</td>
<td>28</td>
<td>女</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>陈赛</td>
<td>38</td>
<td>女</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>king</td>
<td>18</td>
<td>男</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>5</td>
<td>许佳</td>
<td>8</td>
<td>女</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>6</td>
<td>张三</td>
<td>8</td>
<td>男</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
求助怎么添加点击事件
BaseAdapter怎么添加点击事件
添加点击事件
怎么给最后一张图片添加一个按钮 设置点击事件
相关分类