2017-06-18 176 views
0

我需要做一些任务来获得作为前端开发人员的实习。任务是:Javascript /数组/删除一个对象/添加一个对象

创建一个仪表板,我可以看到员工和客户。查看附件。

要求:

  1. Dinamically显示员工和客户的两个 数组列表。
  2. 除了最后一个,所有员工都可以删除。
  3. 新客户可以添加。

我已经完成了所有这些任务,但是我对第三任务有任何问题。我找到了应该删除的“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>

我附上一些图片来解释我的问题。

2

+0

调用init()?并在此之前清除内容 –

回答

0

考虑到你的代码结构,并且您正在使用一个textarea的事实,可以明确选择和调用您创建的init2功能:

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"); 
    selected_area.value = ""; 
    init2(); 
} 

但是,如果你的还要好使用一些库/框架绑定视图和模型。

+0

谢谢,我已经像你说的那样以这种方式完成了。 –

相关问题