0
我需要做一些任务来获得作为前端开发人员的实习。任务是:Javascript /数组/删除一个对象/添加一个对象
创建一个仪表板,我可以看到员工和客户。查看附件。
要求:
- Dinamically显示员工和客户的两个 数组列表。
- 除了最后一个,所有员工都可以删除。
- 新客户可以添加。
我已经完成了所有这些任务,但是我对第三任务有任何问题。我找到了应该删除的“employees”数组对象的索引,该函数从数组中删除所选对象,但是如何在输入字段中显示此更改(从显示的员工列表中删除所选对象)?请帮帮我 !!!
var employees = [
{
firstname: "Dorin",
lastname: "Petrescu"
},
{
firstname: "Sergiu",
lastname: "Galescu"
},
{
firstname: "Vasile",
lastname: "Marcu"
},
];
var customers = [
{
firstname: "Valentin",
lastname: "Condratiuc"
},
{
firstname: "Petru",
lastname: "Lesco"
},
{
firstname: "Oleg",
lastname: "Tataru"
},
];
//1) Display the list of customers and employees
function init(){
// document.getElementById("names").value = "";
document.getElementById("names").value = localStorage.getItem("user");
for (i = 0; i < customers.length; i++) {
var needed_area = document.getElementById("names");
needed_area.value +="\n"+ customers[i].firstname +" " + customers[i].lastname;
}
}
function init2(){
for (i = 0; i < employees.length; i++) {
var selected_area = document.getElementById("names2");
selected_area.value +="\n"+employees[i].firstname +" " + employees[i].lastname;
}
}
//2) Delete a Specific Employee
function delete_employee() {
var delete_item = prompt ("The name of employee you want to delete");
index = employees.findIndex(x => x.firstname==delete_item);
console.log(index);
employees.splice(index, 1);
var selected_area = document.getElementById("names2");
}
//3) New Customers can be added :
function push_new_customer() {
var selected_name = prompt("The name of the new customer!");
var selected_surname = prompt("The surname of the new customer!");
customers.push({ firstname: selected_name, lastname: selected_surname });
var needed_area = document.getElementById("names");
needed_area.value+="\n" +selected_name+ " " +selected_surname;
// localStorage.setItem("user", needed_area.value);
}
textarea {
height: 200px;
width: 250px;
}
<body onload="init(); init2();">
<table border="1">
<tr>
<td>
<h2>New Customer</h2>
</td>
<td>
<h2>Registered Customers</h2>
</td>
<td>
<h2>Delete an employee</h2>
</td>
<td>
<h2>Current Employees</h2>
</td>
</tr>
<tr>
<td>
<!-- <input type="text" placeholder="your name" id="add" onkeypress="handleKeyPress(event)"> -->
<button onclick="push_new_customer();" type="button" name="button">Add a new customer!</button>
</td>
<td>
<textarea id="names">
</textarea>
</td>
<td>
<!-- <input type="text" placeholder="your name" id="add" onkeypress="handleKeyPress(event)"> -->
<button onclick="delete_employee();" type="button" name="button">Delete an employee</button>
</td>
<td>
<textarea id="names2">
</textarea>
</td>
</tr>
</table>
</body>
我附上一些图片来解释我的问题。
调用init()?并在此之前清除内容 –