求助!用JS怎么做静态页面的查询

jiawei_zeng 2015-05-18 03:47:16
如表格中有2个文本框,我想在输入 “张” 以后, 点击搜索就在姓名那一列查找出有关 “张” 的所有信息,千万不要像百度搜索一样的有下拉模糊查询的,不要那种!还有1个文本框就是全局搜索,那个文本框是找整个表格的信息进行搜索的。全局搜索就比如说我输入A01就能找出A01的东西,输入就找出关于的所有信息,求用JavaScript代码写,不要用Jquery 急急急,求教万分感谢。

姓名:<input type="text" id="name"/>
全局搜索:<input type="text" id="check"/>
<input type="botton" id="search" value="搜索"/>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>A01</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>A01</td>
<td>张杰</td>
<td>男</td>
</tr>
<tr>
<td>A02</td>
<td>李四</td>
<td>女</td>
</tr>
<tr>
<td>A03</td>
<td>王五</td>
<td>男</td>
</tr>
</table>
...全文
294 3 打赏 收藏 举报
写回复
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
jiawei_zeng 2015-05-19
  • 打赏
  • 举报
回复
辛苦了!谢谢
a327369238 2015-05-18
  • 打赏
  • 举报
回复

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>模态窗口和非模态窗口</TITLE>
<script language="javascript">
function search(){
	var searchName=document.getElementById("name").value;
	var searchTotal=document.getElementById("check").value;
	if(searchName=="" && searchTotal==""){
		alert("请输入姓名或全局搜索条件");
		return;
	}
	
	var nameLength=searchName.length;
	var table = document.getElementById("table"); 
	var rowsLength = table.rows.length;
	var resultTable=document.getElementById("result");
	var resultLength=resultTable.rows.length;
	while(resultLength>1){
		resultTable.deleteRow(resultLength-1);
		resultLength--;
	}
	
	 for(i=1;i<rowsLength;i++){
	 //根据姓名搜索
		 if(searchName!=""){
		 //找到姓名那一列
			var name=table.rows[i].cells[1].innerText;
			var cellsLength=table.rows[i].cells.length;
			//alert(cellsLength);
			if(searchName==name.substring(0,nameLength)){
				var currentRow=resultTable.rows.length;
				var NewRow=resultTable.insertRow(currentRow);
				for(j=0;j<cellsLength;++j){
					newCell=NewRow.insertCell(j);					
					newCell.innerText= table.rows[i].cells[j].innerText;
				}
			}
		}
		else{
		//全局搜索		
			var cellsLength=table.rows[i].cells.length;						
			for(j=0;j<cellsLength;++j){
				var total=table.rows[i].cells[j].innerText;
				if(searchTotal==total){
					var currentRow=resultTable.rows.length;
					var NewRow=resultTable.insertRow(currentRow);
					for(j=0;j<cellsLength;++j){
						newCell=NewRow.insertCell(j);					
						newCell.innerText= table.rows[i].cells[j].innerText;
					}
				}
			}
		}
 } 
}

</script>
</HEAD>
<BODY>
姓名:<input type="text"  id="name"/><br>
全局搜索:<input type="text"  id="check"/><br>
          <input type="button"  id="search" value="搜索" onclick="search()"/>
		 
<table id="table">
       <tr>
               <th>学号</th>
               <th>姓名</th>
               <th>性别</th>
        </tr>
        <tr>
               <td>A01</td>
               <td>张三</td>
               <td>男</td>
        </tr>
        <tr>
               <td>A01</td>
               <td>张杰</td>
               <td>男</td>
        </tr>
         <tr>
               <td>A02</td>
               <td>李四</td>
               <td>女</td>
        </tr>
        <tr>
               <td>A03</td>
               <td>王五</td>
               <td>男</td>
        </tr>
</table>
搜索结果:<br>
<div>
<table id="result">
<tr>
               <th>学号</th>
               <th>姓名</th>
               <th>性别</th>
        </tr>
</table>
</div>
</BODY>
</HTML>
jiawei_zeng 2015-05-18
  • 打赏
  • 举报
回复
有木有人帮帮忙!
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2015-05-18 03:47
社区公告
暂无公告