                        课程
                    
                        /后端开发
                        
                            /Java
                        
                        /Servlet+Ajax实现搜索框智能提示

Cannot read property 'childNodes' of null,清除数据的时候，下面没有子节点。

<%--
  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">下面没有子节点，清除数据应该在哪里调用啊？

慕雪530680

2018-08-10

源自：Servlet+Ajax实现搜索框智能提示 2-7

关注问题我要回答

1369

操作

收起

1 回答

lff520yyl
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";
      }