类似google搜索自动显示搜索结果例子

penghuaiyi

浏览: 522902 次
性别:
来自: 苏州

最近访客更多访客>>

kingbird001

Dong丶

forborn

wwh_1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript总结

Google 华为 Nokia

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网元选择</title>
<link href="../css/all.css" rel="stylesheet" type="text/css">
<link href="../css/forms.css" rel="stylesheet" type="text/css">
 <script>
   function searchNe()
   {
     clearTable();
     var tb=document.getElementById("neList");
     var nename=document.all.neName.value;
     if(nename!="")
     {
       var tr=tb.insertRow();
       tr.style.cursor="hand";
       tr.onclick=function(){
        var neName=this.cells[1].innerHTML;
        window.returnValue={"neName":neName};
        window.close();
        };
        
       tr.onmouseover=function(){ this.style.backgroundColor="#d3dfff";}
       tr.onmouseout=function(){ this.style.backgroundColor="";}
       
       var td0=tr.insertCell();
       td0.innerHTML="1";
       var td1=tr.insertCell();
       td1.innerHTML=nename.toUpperCase();
       var td2=tr.insertCell();
       td2.innerHTML="西门子";
       var td3=tr.insertCell();
       td3.innerHTML="10FE0"+(i+1);
       var td4=tr.insertCell();
       td4.innerHTML="郑州北环生产楼7楼";
       var td5=tr.insertCell();
       td5.innerHTML="西门子汇接局";
       var td6=tr.insertCell();
       td6.innerHTML="正常";
       var td7=tr.insertCell();
       td7.innerHTML="";
     
     }
     else
     {
      var ne=["ZZA1","ZZG12","ZZDS1","ZZDM101","ZZL3","ZZGS101","ZZMGA4"];
     for(var i=0;i<ne.length;i++)
     {
       var tr=tb.insertRow();
       tr.style.cursor="hand";
       tr.onclick=function(){
        var neName=this.cells[1].innerHTML;
        window.returnValue={"neName":neName};
        window.close();
        };
        
       tr.onmouseover=function(){ this.style.backgroundColor="#d3dfff";}
       tr.onmouseout=function(){ this.style.backgroundColor="";}
       
       var td0=tr.insertCell();
       td0.innerHTML=i+1;
       var td1=tr.insertCell();
       td1.innerHTML=ne[i];
       var td2=tr.insertCell();
       td2.innerHTML="西门子";
       var td3=tr.insertCell();
       td3.innerHTML="10FE0"+(i+1);
       var td4=tr.insertCell();
       td4.innerHTML="郑州北环生产楼7楼";
       var td5=tr.insertCell();
       td5.innerHTML="西门子汇接局";
       var td6=tr.insertCell();
       td6.innerHTML="正常";
       var td7=tr.insertCell();
       td7.innerHTML="";
      
     }
     }

    
 
   }
   
    /**
    *删除表格中的所有行
    */
   function clearTable()
   {
      var tab=document.getElementById("neList");
      for(var i=tab.rows.length-1;i>0;i--) 
      { 
        tab.deleteRow(i); 
      } 
   
   }
   
   
 //返回html控件的坐标
  function  getPoint(id){ 
    var htmlObj = document.getElementById(id);
    var  rd = {x:0,y:0};
    while(htmlObj){  
        rd.x  +=  htmlObj.offsetLeft;   
        rd.y  +=  htmlObj.offsetTop;
        htmlObj= htmlObj.offsetParent;
    }
    
	return  rd;
}

  function show()
  { 
     document.getElementById("useState").style.display="none";
     var ne=["ZZA1","ZZG12","ZZDS1","ZZDM101","ZZL3","ZZGS101","ZZMGA4"];
     var s=document.getElementById("neName");
     if(s.value=="") return;
    
     var rd=getPoint("neName");
	 var pop=document.getElementById("pop");
	 
	 pop.style.display="block";
	 pop.style.border="1px solid #FF9933";
	 pop.style.background="white";
	 pop.style.left=rd.x+1+"px";
	 pop.style.top=rd.y+s.offsetHeight+"px";
	 pop.style.width=s.offsetWidth;
    
	 removeAllRows("result");
	 var tb=document.getElementById("result");
	 for(var i=0;i<ne.length;i++)
	 {
	   var tr=tb.insertRow();
	   tr.onmouseout  = function(){this.style.background="";};
       tr.onmouseover = function(){this.style.background="#e1e8ff";};
	   tr.onclick=bb;
	   var td0=tr.insertCell();
	   td0.style.border="0";
       td0.innerHTML=ne[i];

	 }
	
	 var tr=tb.insertRow();
	 var td=tr.insertCell();
	 td.align="right";
	 td.style.border="0";
	 td.innerHTML="<a href='#' onclick=closeDiv()>关闭</a>"
	
  }
  
     /**
    *删除表格中的所有行
    */
   function removeAllRows(id)
   {
      var tab=document.getElementById(id);
      for(var i=tab.rows.length-1;i>=0;i--) 
      { 
        tab.deleteRow(i); 
      } 
   
   }

  function closeDiv()
  {
     document.getElementById("pop").style.display="none";
     document.getElementById("useState").style.display="";
  }


  function bb()
  {
     document.all.neName.value=this.cells[0].innerHTML;
     document.getElementById("useState").style.display="";
  }
   
 </script>
</head>

<body>
<div class="history-item">
<div class="title">网元查询</div>
<div class="search">
<form action="#" name="fm" method="post">
<table class="table">
  <tr>
   <td width="4%" rowspan="3"><img src="../css/table/search.gif" width="40" height="39"></td>
  	<td>网元名称</td>
	<td><input name="neName" id="neName" type="text" onKeyup="show()" class="text">
	<div id="pop" style="position:absolute;display:none">
    	<table id="result" width="100%"></table>
	</div>
	</td>
        <td>网元类别</td>
        <td><select name="neType" class="select">
          <option>请选择</option>
          <option>BELL LSTP</option>
          <option>端局华为软交换</option>
          <option>G9关口局</option>
          <option>智能网</option>
          <option>彩铃</option>
          <option>端局</option>
          <option>G6关口局</option>
          <option>华为软交换</option>
          <option>华为STP</option>
          <option>BELL HSTP</option>
          <option>西门子汇接局</option>
        </select></td>
	    <td>厂商</td>
	    <td><select name="factory" class="select">
          <option>请选择厂商</option>
          <option value="西门子">西门子</option>
          <option value="BELL">BELL</option>
          <option value="华为">华为</option>
          <option value="NOKIA">NOKIA</option>
          <option value="AIP厂家">AIP厂家</option>
          <option value="彩铃厂商">彩铃厂商</option>
          <option value="思科">思科</option>
        </select></td>
	    <td rowspan="3"><input type="button" class="button" value="查 询" onClick="searchNe()"></td>
  </tr>
  <tr>
    <td>信令点编码</td>
    <td ><input name="linkCode" type="text" class="text"></td>
    <td>所属机房</td>
    <td><select name="select4" class="select">
      <option>请选择</option>
      <option value="562">安阳市黄河路机房</option>
      <option value="46">许昌许扶路5502局3楼</option>
      <option value="45">开封宋城路1号生产楼5楼</option>
      <option value="44">李万机房</option>
      <option value="43">新乡平原路398号移动大楼10楼</option>
      <option value="42">东风路机房</option>
    </select></td>
    <td >设备型号</td>
    <td ><input name="text22" type="text" class="text"></td>
    </tr>
  <tr>
    <td>使用状态</td>
    <td ><select name="select2" id="useState" class="select">
      <option>正常</option>
      <option>故障</option>
      <option>工程</option>
      <option>割接</option>
      <option>退网</option>
    </select></td>
    <td>网元编码</td>
    <td><input name="text23" type="text" class="text"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
   </table>
</form>
</div>

<div class="history-item-title">网元信息</div>
<div class="history-item-content">
<table class="listTable" id="neList">
   <tr class="header">
	 <td class="xuhao">序号</td>
     <td>网元名称</td>
     <td>厂商</td>
     <td>信令编码</td>
     <td>所属机房</td>
     <td>网元类别</td>
     <td>使用状态</td>
     <td>网元编码</td>
   </tr>
</table>
</body>
</html>
<script>
document.body.onclick = function() 
{ 	
	
  	var srcE=window.event.srcElement;
	if(srcE.id!="pop" && srcE.id!="neName") 
	{
	  document.getElementById("pop").style.display="none";
	  document.getElementById("useState").style.display="";
	}
	  
   
}
</script>

分享到：

frame之间进行参数传递例子 | 控件下方弹出操作层窗口(交换系统信令增加 ...

2009-04-09 10:09
浏览 1339
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

类似google搜索自动显示搜索结果例子

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

类似google搜索自动显示搜索结果例子

评论

发表评论

相关推荐

Javascript实现的颜色选择器

JS控制文本框只能输入整数或带一位小数的浮点数

ymPrompt弹出窗口(很牛x的)

Javascript实现的遮罩层

Javascript培训文档

结点可以拖动，右键弹出操作菜单的树(dhtmlxtree改造)

可以拖动的DIV

泽元公司实现的对话框(很牛的)

鼠标点击拖动选中(模仿google日历网格)

点击鼠标右键弹出自定义菜单

解决循环动态添加事件，参数为最后一次循环值的问题

JS实现的分页

JS文档对象模型(DOM)的基本方法

为指定的表单元素动态添加事件

javascript中的数组(Array)扩展

如何在框架(frame)页面之间使用appendChild()？

按钮下方弹出层

js实现的tab

iframe自适应高度

可手动输入的select

最近访客更多访客>>