如何在不双击的情况下“刷新” div？

Question

我会尽量说明这一点。但是现在，当它被调用到 HTML 中时，我会显示一个表格。但是，当有人输入总统姓名时，我希望完整列出的表格消失并显示该人单击“搜索总统”后过滤的结果。我尝试了一个条件 if else 语句，但它清除了表格（使其空白），然后它让我不得不再次单击，然后显示过滤结果。有什么方法可以防止双击吗？

JSfiddle 用于查看https://jsfiddle.net/rtomino/7Lod1szp/1/

我有条件，但它让我双击。

if (document.getElementById('presidentialTable').innerHTML !== "") {
    document.getElementById("presidentialTable").innerHTML = "";
} else {
    document.getElementById('presidentialTable').appendChild(table);
}

HTML

<form>
    <label for="name">Name:</label> 
    <input id='input' placeholder="President Name" type="text"> 
    <button onclick="loadPresidents()" type="button">Search for Presidents</button> <button type="button" onclick="clearTable()">Clear</button>
    <div id="presidentialTable"></div>
</form>

JS

function loadPresidents() {
"use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
        var data = this.responseText,
            jsonResponse = JSON.parse(data),
            table = document.createElement('table');

        table.setAttribute('class', 'history');
        var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
        var capitalize = function(s) {
            return s.charAt(0).toUpperCase() + s.slice(1);
        };

        function filterPresidents(data) {
            var input = document.getElementById('input').value;
            return data.filter(function(historicalData) {
                return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1;
            });

        }

        var tr = document.createElement('tr');
        for (var i = 0; i < properties.length; i++) {
            var th = document.createElement('th');
            th.appendChild(document.createTextNode(capitalize(properties[i])));
            tr.appendChild(th);
        }

        table.appendChild(tr);

        var tr, row;
        var filtered = filterPresidents(jsonResponse["presidents"].president);
        for (var r = 0; r < filtered.length; r++) {
            tr = document.createElement('tr');
            row = filtered[r];
            for (var i = 0; i < properties.length; i++) {
                var td = document.createElement('td');
                td.appendChild(document.createTextNode(row[properties[i]]));
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }

        if (document.getElementById('presidentialTable').innerHTML !== "") {
            document.getElementById("presidentialTable").innerHTML = "";
        } else {
        document.getElementById('presidentialTable').appendChild(table);
        }
    }
};
xhttp.open("GET", "http://schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true);
xhttp.send();
 }

 loadPresidents();

 function clearTable() {
    document.getElementById("presidentialTable").innerHTML = "";
 }

Answer 1

试试这个 sn-p。

你不需要添加这个条件

if (document.getElementById('presidentialTable').innerHTML !== "") {
   document.getElementById("presidentialTable").innerHTML = "";
} else {
   document.getElementById('presidentialTable').appendChild(table);
}

如果有数据，这个条件会做什么，而不是清除表

所以只需将此行添加到函数顶部，单击即可document.getElementById("presidentialTable").innerHTML = "";

希望对你有帮助

function loadPresidents() {
    "use strict";
    var xhttp = new XMLHttpRequest();
    document.getElementById("presidentialTable").innerHTML = "";
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var data = this.responseText,
                jsonResponse = JSON.parse(data),
                table = document.createElement('table');
			
            table.setAttribute('class', 'history');
            var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
            var capitalize = function(s) {
                return s.charAt(0).toUpperCase() + s.slice(1);
            };

            function filterPresidents(data) {
                var input = document.getElementById('input').value;
                return data.filter(function(historicalData) {
                    return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1;
                });

            }

            var tr = document.createElement('tr');
            for (var i = 0; i < properties.length; i++) {
                var th = document.createElement('th');
                th.appendChild(document.createTextNode(capitalize(properties[i])));
                tr.appendChild(th);
            }

            table.appendChild(tr);

            var tr, row;
            var filtered = filterPresidents(jsonResponse["presidents"].president);
            for (var r = 0; r < filtered.length; r++) {
                tr = document.createElement('tr');
                row = filtered[r];
                for (var i = 0; i < properties.length; i++) {
                    var td = document.createElement('td');
                    td.appendChild(document.createTextNode(row[properties[i]]));
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
  document.getElementById('presidentialTable').appendChild(table);
        }
    };
    xhttp.open("GET", "//schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true);
    xhttp.send();
}

loadPresidents();

function clearTable() {
    document.getElementById("presidentialTable").innerHTML = "";
}

body {
  font-family: 'Open Sans', sans-serif;
  padding: 20px 12px 10px 20px;
}

label {
    display: block;
    margin: 15px 0px 0px 0px;
    font-weight: 600;
    color: #1C2238;
}
label > span{
    width: 100px;
    font-weight: bold;
    float: left;
    padding-top: 8px;
    padding-right: 5px;
}

input {
    box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 3px;
    padding: 7px;
    outline: none;
    margin: 10px 0;
	width: 20%;
}
input:focus{
    border: 1px solid #0C0;
}

button {
    border: none;
    padding: 8px 15px 8px 15px;
    background: #88EF5E;
    color: #1C2238;
    box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
    margin: 15px 0;
    font-size: 1em;
}
button:hover{
    background: #EA7B00;
    color: #fff;
}

table
{
    border-collapse: collapse;
}

td {
    padding: .5em;
}

<form>
		<label for="name">Name:</label> 
		<input id='input' placeholder="President Name" type="text"> 
		<button onclick="loadPresidents()" type="button">Search for Presidents</button> <button type="button" onclick="clearTable()">Clear</button>
		<div id="presidentialTable"></div>
</form>

Answer 2

您的问题已通过替换 div 清除逻辑解决

if (document.getElementById('presidentialTable').innerHTML !== "") {
  document.getElementById("presidentialTable").innerHTML = "";
} else {
 document.getElementById('presidentialTable').appendChild(table);
}

像这样替换

document.getElementById("presidentialTable").innerHTML = ""; 
document.getElementById('presidentialTable').appendChild(table);

已附上已修复的问题，请仔细阅读

searching issue fixed

Answer 3

检查下面的代码...这是FIDDLE

loadPresidents = function() {

    "use strict";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var data = this.responseText,
                jsonResponse = JSON.parse(data),
                table = document.createElement('table');
			
            table.setAttribute('class', 'history');
            var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
            var capitalize = function(s) {
                return s.charAt(0).toUpperCase() + s.slice(1);
            };

            function filterPresidents(data) {
                var input = document.getElementById('input').value;
                return data.filter(function(historicalData) {
                    return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1;
                });

            }

            var tr = document.createElement('tr');
            for (var i = 0; i < properties.length; i++) {
                var th = document.createElement('th');
                th.appendChild(document.createTextNode(capitalize(properties[i])));
                tr.appendChild(th);
            }

            table.appendChild(tr);

            var tr, row;
            var filtered = filterPresidents(jsonResponse["presidents"].president);
            for (var r = 0; r < filtered.length; r++) {
                tr = document.createElement('tr');
                row = filtered[r];
                for (var i = 0; i < properties.length; i++) {
                    var td = document.createElement('td');
                    td.appendChild(document.createTextNode(row[properties[i]]));
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
             
			 			document.getElementById("presidentialTable").innerHTML = ""; 
            document.getElementById('presidentialTable').appendChild(table);
        }
         
    };
    xhttp.open("GET", "//schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true);
    xhttp.send();
   
}

loadPresidents();


 

body {
  font-family: 'Open Sans', sans-serif;
  
}

label {
    display: block;
    margin: 15px 0px 0px 0px;
    font-weight: 600;
    color: #1C2238;
}
label > span{
    width: 100px;
    font-weight: bold;
    float: left;
    padding-top: 8px;
    padding-right: 5px;
}

input {
    box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 3px;
    padding: 7px;
    outline: none;
    margin: 10px 0;
}
input:focus{
    border: 1px solid #0C0;
}

button {
    border: none;
    padding: 8px 10px 8px 10px;
    background: #88EF5E;
    color: #1C2238;
    box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
    margin: 10px 0;
    font-size: 1em;
    cursor:pointer;
    transition:0.2s all linear;
}
button:hover{
    background: #EA7B00;
    color: #fff;
}

table{
    width: 100%;
}

table,td,th
{
    border-collapse: collapse;
    border:1px solid #999;
}

th{
  padding:10px 25px;
 
}

td {
    padding: .2em;
}
#demo{
  text-align:center;
}

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="custom.js"></script>
    </head>
    <body>
    <form>
		<label for="name">Name:</label> 
		<input id='input' placeholder="President Name" type="text"> 
		<button onclick="loadPresidents()" type="button">Search for Presidents</button> <button onclick="loadPresidents()" type="reset">Clear</button>
		<div id="presidentialTable"></div>
    <div id="demo">No Results found</div>
	</form>
    </body>
</html>