Question

我需要做一些任务才能获得作为前端开发人员的实习机会。任务是：

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

请求：

以两种方式显示员工和客户列表阵列。
除最后一名员工外，可以删除所有员工。
可以添加新客户。

我已完成所有这些任务，但我在第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

Answer 1

考虑到您的代码结构以及使用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();
}

但如果你使用一些库/框架绑定视图和模型会更好。

Javascript / Arrays /删除对象/添加对象

1 个答案: