2017-06-18 11 views
0

フロントエンドの開発者としてインターンシップを取得するには、いくつかのタスクを実行する必要があります。タスクは次のとおりです。Javascript/Arrays/Deleteオブジェクト/オブジェクトを追加する

従業員と顧客を表示できるダッシュボードを作成します。添付ファイルを参照してください。

要求:

  1. Dinamically 2つの アレイから従業員と顧客のリストを表示します。
  2. すべての従業員を削除することができます。
  3. 新しい顧客を追加することができます。

私はこれらの作業をすべて行っていますが、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

あなたのコードの構造を考慮すると、あなたがテキストエリアを使用している事実は、あなたが選択をクリアし、作成した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

ありがとう、私はあなたが言ったようにこのようにしました。 –

関連する問題