Добавить входные данные класса в новую строку таблицы jQuery

Я создал класс, который добавляется к строке таблицы в DOM с помощью кнопки отправки. Я не могу понять, добавлен ли второй вход, как можно автоматически установить новую строку таблицы? То, как мой код сейчас, они продолжают в той же строке.

Я думал сделать отдельную функцию для второго входа... но подумал, что должен быть лучший способ, если мне нужно 20 - 30 входов??

   let monthlyCost = 20000;
   let employees = [];


    class Employee{
       constructor(firstName, lastName,idNumber,jobTitle,salary){
          this.firstName = firstName;
          this.lastName = lastName;
          this.idNumber = idNumber;
          this.jobTitle = jobTitle;
          this.salary = salary;
   }

  }


    $(document).ready(readyNow);

       function readyNow() {
     $('#subButton').on('click', function () {
      let newEmployee = new Employee( $('#firstName').val(), 
       $('#LastName').val(),
        $('#ident').val(), $('#title').val(), $('#salary').val());

          console.log(employees);
          employees.push(newEmployee);
           updateFirstEmployee();
      });

      function updateFirstEmployee () {
        let outPut = $('#firstEmployee');

  for(employee of employees){
   outPut.append('<td>' + employee.firstName + '</td>');
   outPut.append('<td>' + employee.lastName + '</td>');
   outPut.append('<td>' + employee.idNumber + '</td>');
   outPut.append('<td>' + employee.jobTitle + '</td>');
   outPut.append('<td>' + employee.salary + '</td>');
   outPut.append('</tr>')
  }
 }
// Function updateSecondEmployee () {
//   let output2 = $('#second')
// }

} html- Калькулятор зарплаты

<h1></h1>
<div id="container">

<div id="banner">
  <h1>Salary Calculator</h1>
</div>
<h3>Add Employee</h3>
<div id="inputBoxes">
  <input type="text" id="firstName" placeholder="First Name"/>
  <input id="LastName"  placeholder="Last Name" />
  <input id="ident" placeholder="ID Number"/>
  <input id="title"  placeholder="Job Title" />
  <input id="salary"  placeholder="Salary" />

 </div>
  <div id="subButton">
    <button type="submit">Submit</button>
  </div>
  <h3>Add Employee</h3>
  <table id='firstEmployee'>
      <tr>
        <th>First Name</th>
       <th>Last Name</th>
       <th>Employee ID</th>
       <th>Job Title</th>
       <th id="sal">Salry</th>
     </tr>
         </table>

         <table>


     <tr>
        <td id="employeeName" input=""></td>
        <td id="employeeLastName" input=""></td>
        <td id="employeeID" input=""></td>
        <td id="employeeTitle" input=""></td>
        <td id="a-salary" input=""></td>
     </tr>
        </table>
     <tr>
        <td id="firstName2" input=""></td>
        <td id="LastName2" input=""></td>
        <td id="ID2" input=""></td>
        <td id="Title2" input=""></td>
        <td id="salary2" input=""></td>
      </tr>

     </table>
  <h2>Total Monthly:</h2>
   </div>



  </body>
  </html>

0 ответов

Другие вопросы по тегам