Добавить входные данные класса в новую строку таблицы 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>