Javascript /數組/刪除一個對象/添加一個對象

我需要做一些任務來獲得作爲前端開發人員的實習。任務是：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>

我附上一些圖片來解釋我的問題。

來源

2017-06-18 Misha Lopez

調用init（）？並在此之前清除內容 –

考慮到你的代碼結構，並且您正在使用一個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(); 
}

但是，如果你的還要好使用一些庫/框架綁定視圖和模型。

來源

2017-06-18 21:07:25

謝謝，我已經像你說的那樣以這種方式完成了。 –

Javascript /數組/刪除一個對象/添加一個對象

回答

相關問題