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);
//?對(duì)tbody中的每一行進(jìn)行循環(huán)
for?(var?i?=?0;?i?<?tbody.rows.length;?i++)?{
var?inputTxt?=?tbody.rows[i].cells[1].innerHTML.toLowerCase();
tbody.rows[i].style.display?=?"none";
//?對(duì)我們輸入的搜索條件進(jìn)行循環(huán)
for?(var?j?=?0;?j?<?nameArray.length;?j++)?{
if(inputTxt.indexOf(nameArray[j])?!=?-1){
tbody.rows[i].style.display?=?"table-row";
}
}
}
}
}就是點(diǎn)擊男的時(shí)候只出現(xiàn)男的，點(diǎn)女選項(xiàng)的時(shí)候就出現(xiàn)女的，幫幫忙。。- -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="請輸入姓名進(jìn)行搜索..."><!-- <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>學(xué)生信息表</caption><thead><tr><th>id號(hào)</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>
添加一個(gè)男女性別的點(diǎn)擊事件，配圖，幫忙看看加在那個(gè)地方，怎么改。- -
小學(xué)時(shí)光丶風(fēng)景美
2016-10-26 18:50:14