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>
添加回答
举报
0/150
提交
取消