Question

我遇到一个问题，我点击按钮后页面顶部的标签消失了。当我点击＆＃34;显示员工＆＃34;按钮，＆＃34;姓氏＆＃34; ＆＃34;名字＆＃34;和＆＃34;地区名称＆＃34;一切都消失了。

以下是一些截图：

点击＆＃34;显示员工＆＃34;：https://imgur.com/a/ZgU4j

点击＆＃34;显示员工＆＃34;：https://imgur.com/a/PQkoH

我感觉这是我的displayEmployees js函数的一个问题：

function displayEmployees(data) {
var table = "";
$.each(data.rows, function(index, row){
    table += "<div class='row'>\n"; 
    table += "<div class='col1'>" + row.EMP_FIRST + "</div>\n";
    table += "<div class='col2'>" + row.EMP_LAST + "</div>\n";
    table += "<div class='col3'>" + row.REGION_NAME + "</div>\n";
    table += "<button dButton = " + row.EMPLOYEE_ID + " class =  'deleteButton'> Delete Employee </button>";
    table += "</div></br>";
});


$("#outputDiv").children("div:not(:first)").remove();
$("#outputDiv").html(table);
$("#addEmployeeButton").on('click', addEmployee);
$(".deleteButton").on('click', deleteEmployee);

}

$("#outputDiv").children("div:not(:first)").remove();
$("#outputDiv").html(table);
$("#addEmployeeButton").on('click', addEmployee);
$(".deleteButton").on('click', deleteEmployee);

}

这是我的HTML：

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="utf-8">
    <title>Employee Table</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <h2 id="title">Project 4 Web App</h2>
    <div id="outputDiv" class="container">
        <div class="row">
            <div class="col1H">Last Name</div>
            <div class="col2H">First Name</div>
            <div class="col3H">Region Name</div>
    </div>
    </div>
    <br>
    Filter by Region&nbsp
    </br>
    <select>
    <option value="1">Select</option>
    <option value="2">NW</option>
    <option value="3">SW</option>
    <option value="4">MN</option>
    <option value="5">MS</option>
    <option value="6">NE</option>
    <option value="7">SE</option>
    </select>
    <div id="buttonDiv"><br>
        <button id="showButton">Show Employees</button>
    </div>
    <p>
        <h3>To Add an Employee:</h3>
        <div class="divCol1">Employee First Name:</div><div class="divCol12">     <input type="text" id="EMP_FIRST"/></div><br>
        <div class="divCol1">Employee Last Name:</div><div class="divCol12"><input type="text" id="EMP_LAST"/></div><br>
        <br><div class="divCol1">Region ID:</div><div class="divCol12"><input type="text" id="REGION_ID"/></div><br>

        <br><button id="addEmployeeButton">Add Employee</button><br>


    <script src="jquery-3.1.1.min.js"></script>
    <script src="employee.js"></script>
</body>
</html>

非常感谢任何帮助。提前谢谢。

Answer 1

您的选择器不正确。而不是

$("#outputDiv").children("div:not(:first)").remove();

试

$("#outputDiv").children("> div:not(:first)").remove();

或更短：

$("#outputDiv > div:not(:first)").remove();

说明：您的选择器还会找到列DIV而不仅是行。查看jQuery文档以获取更多信息。

Answer 2

这是我改变的。这个问题现在已经解决了。

function displayEmployees(data) {
var table = "";
table += "<div class='row'>\n";
table += "<div class='col1'><b><u>First Name</b></u></div>\n";
table += "<div class='col2'><b><u>Last Name</b></u></div>\n";
table += "<div class='col3'><b><u>Region</b></u></div>\n";
table += "</div></br>";

$.each(data.rows, function(index, row) {
    table += "<div class='row'>\n";
    table += "<div class='col1'>" + row.EMP_FIRST + "</div>\n";
    table += "<div class='col2'>" + row.EMP_LAST + "</div>\n";
    table += "<div class='col3'>" + row.REGION_NAME + "</div>\n";
    table += "<button dButton = " + row.EMPLOYEE_ID + " class =  'deleteButton'> Delete Employee </button>";
    table += "</div></br>";
});

$("#outputDiv > div:not(:first)").remove();
$("#outputDiv").html(table);
$(".deleteButton").on('click', deleteEmployee);


}

横幅正在从网页上消失。对于如何解决这个问题，有任何的建议吗？

2 个答案: