源自：2-7 前后台程序联调
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 11:20