少了功能..
td的绑定的事件，点击td之后把td内容放入input
2013_
2017-05-08
2 回答
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>ajax</title> <style type="text/css"> .mouseOver{ background: #708090; color: #FFFAFA; } .mouseOut{ background: #FFFAFA; color: #000000; } </style> <body> <div> <div style="position:relative"> <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"> <input type="button" value="百度"> </div> <div id="popDiv" style="position:absolute"> <table id="content_table" bgcolor="#FFFAFA"> <tbody id="content_table_body"> </tbody> </table> </div> <div>aaaa</div> </div> </body> <script type="text/javascript"> var xmlHttp; function getMoreContents(){ var content=document.getElementById("keyword"); if(content.value==""){ clearContent(); return; } xmlHttp=createXMLHttp(); var url="search?keyword="+escape(content.value); xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange=callback; xmlHttp.send(null); } //创建xmlHttp对象 function createXMLHttp(){ var xmlHttp; if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); if(!xmlHttp){ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } //回调函数 function callback(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ var result=xmlHttp.responseText; var json=eval("("+result+")"); setContent(json); } } } //设置关联数据的展示 function setContent(contents){ clearContent(); setLocation(); var size=contents.length; for(var i=0;i<size;i++){ var nextNode=contents[i]; var tr=document.createElement("tr"); var td=document.createElement("td"); td.setAttribute("border", "0"); td.setAttribute("bgcolor", "#FFFAFA"); td.setAttribute("id",i); td.onmouseover=function(){ this.className='mouseOver'; }; td.onmouseout=function(){ this.className='mouseOut'; }; td.onclick=function(){//点击获取td的值 document.getElementById("keyword").value=this.innerHTML; clearContent(); }; var text=document.createTextNode(nextNode); td.appendChild(text); tr.appendChild(td); document.getElementById("content_table_body").appendChild(tr); } } //清空之前的数据 function clearContent(){ var contTableBody=document.getElementById("content_table_body"); var size=contTableBody.childNodes.length; for(var i=size-1;i>=0;i--){ contTableBody.removeChild(contTableBody.childNodes[i]); } document.getElementById("popDiv").style.border="none"; } //失去焦点时 function keywordBlur(){ setTimeout("clearContent()",1000);//停一秒再清空，不然选择无效 } //设置数据展示样式 function setLocation(){ var content=document.getElementById("keyword"); var width=content.offsetWidth; var left=content["offsetLeft"]; var top=content["offsetTop"]+content.offsetHeight; var popDiv=document.getElementById("popDiv"); popDiv.style.border="black 1px solid"; //popDive.style.left=left+"px"; //popDiv.style.top=top+"px"; popDiv.style.width=width+"px"; document.getElementById("content_table").style.width=width+"px"; } </script></html>我后面提的问题有答案
举报
0/150
提交
取消
