少了功能..-慕课网

首页课程实战体系课手记专栏慕课教程

少了功能..

来源：2-8 显示框美化

2013_

2017-05-08 20:07

td的绑定的事件，点击td之后把td内容放入input

写回答关注

2回答

白砂糖K: 2017-05-10 23:40:29

<%@ 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 0