<%--
??Created?by?IntelliJ?IDEA.
??User:?kiss
??Date:?2018/8/9
??Time:?10:54
??To?change?this?template?use?File?|?Settings?|?File?Templates.
--%>
<%@?page?contentType="text/html;charset=UTF-8"?language="java"?%>
<html>
??<head>
????<title>百度一下</title>
????<style>
??????.baidu{
????????position:?absolute;
????????top:?50%;
????????left:?50%;
????????margin-left:?-150px;
????????margin-top:?-100px;
??????}
??????.mouseover{
??????}
??????.mouseout{
??????}
????</style>
????<script>
??????var?xmlHttp;
??????function?bdinput()?{
??????????var?baduinput?=?document.getElementById("baidu");
??????????if(baduinput.value?==?""){
??????????????return;
??????????}
??????????xmlHttp?=?createXMLHTTP();
??????????var?url?=?"search?keyword="+escape(baduinput.value);
??????????//true表示js腳本在send（）方法之后繼續執行，而不會等待服務器響應
??????????xmlHttp.open("GET",url,true);
??????????//xmlHttp的狀態碼0-4,4表示完成
??????????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+")");
??????????????????//展示在input款下面
??????????????????console.log(result);
??????????????????console.log(eval("("+result+")"));
??????????????????setContent(json);
??????????????}
??????????}
??????}
??????//數據的展示
??????function?setContent(baduinput)?{
??????????clearContent();
??????????var?size?=?baduinput.length;
??????????for?(var?i?=?0;?i?<?size?;?i++)?{
??????????????var?nextnode?=?baduinput[i];//代表json格式數據的第幾個元素
??????????????var?tr?=?document.createElement("tr");
??????????????var?td?=?document.createElement("td");
??????????????td.setAttribute("border","0");
??????????????td.setAttribute("bgcolor","#fffafa");
??????????????td.onmouseover?=?function?(ev)?{
??????????????????this.className?=?"mouseover";
??????????????}
??????????????td.onmouseout?=?function?(ev)?{
??????????????????this.className?=?"mouseover";
??????????????}
??????????????td.onclick?=?function?(ev)?{
??????????????}
??????????????var?text?=?document.createTextNode(nextnode);
??????????????td.appendChild(text);
??????????????tr.appendChild(td);
??????????????document.getElementById("table-tbody").appendChild(tr);
??????????}
??????}
??????//清除輸入框下面的數據
??????function?clearContent()?{
??????????var?table_tbody?=??document.getElementById("table_tbody");
??????????var?size?=?table_tbody.childNodes.length;
??????????console.log(size);
??????????for?(var?i?=?size-1;?i?>=?0;?i--)?{
??????????????table_tbody.removeChild(table_tbody.childNodes[i]);
??????????}
??????}
????</script>
??</head>
??<body>
??<div?class="baidu">
????<input?type="text"?width="300px"?height="100px"?onkeyup="bdinput();"?id="baidu">
????<input?type="button"?value="百度一下">
????<div?id="popdiv">
??????<table?id="content-table"?bgcolor="#fffafa"?border="0"?cellspacing="0"?cellpadding="0">
????????<tbody?id="table-tbody">
????????</tbody>
??????</table>
????</div>
??</div>
??</body>
</html>在數據展示前調用clearContent()，確實<tbody?id="table-tbody">下面沒有子節點，清除數據應該在哪里調用?。?/pre>
2018-10-31
function?clearContent()?{ ??????????var?table_tbody?=??document.getElementById("table_tbody"); ??????????var?size?=?table_tbody.childNodes.length; ??????????console.log(size); ??????????for?(var?i?=?size-1;?i?>=?0;?i--)?{ ??????????????table_tbody.removeChild(table_tbody.childNodes[i]); ??????????} ??????????document.getElement（"popDiv").style.border="none"; ??????}