添加一个男女性别的点击事件，配图，帮忙看看加在那个地方，怎么改。- -
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>
1回答
相关分类