添加一个男女性别的点击事件,配图,帮忙看看加在那个地方,怎么改。- -

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";
				}
			}
		}
	}
}

581089b200011ead05000302.jpg

http://img.mukewang.com/58108a4e00014b5607570327.jpg

581089b40001b29105000367.jpg

就是点击男的时候只出现男的,点女选项的时候就出现女的,帮帮忙。。- -

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>


小学时光丶风景美
浏览 1308回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript