求助！用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>

...全文

320 3 打赏收藏转发到动态举报

写回复

用AI写文章

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