<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="styles.css" />
<script src="./js/jquery/dist/jquery.min.js"></script>
</head>
<body>
<table class="table" id="department_table">
<thead><tr><th>id</th><th>name</th><th>salary</th><th></th></tr></thead>
<tbody class="department" id="department">
</tbody>
</table>
<br><br><br>
<table class="table" id="employe_table">
<thead><tr><th>id</th><th>name</th><th>salary</th><th></th></tr></thead>
<tbody class="employe" id="employe">
</tbody>
</table>
<br><br><br>
<script>
async function GetDepartments() {
// отправляет запрос и получаем ответ
const response = await fetch("api/home/departments", {
method: "GET",
headers: { "Accept": "application/json" }
});
// если запрос прошел нормально
if (response.ok === true) {
// получаем данные
const departments = await response.json();
let rows = document.querySelector("#department");
departments.forEach(department => {
// добавляем полученные элементы в таблицу
rows.append(row(department));
});
}
}
async function DeleteEmploye(id) {
const response = await fetch("api/home/employes/delete/" + id, {
method: "POST",
headers: { "Accept": "application/json" }
});
// если запрос прошел нормально
if (response.ok === true) {
// получаем данные
const employes = await response.json();
let rows = document.querySelector("#employe");
employes.forEach(employe => {
// добавляем полученные элементы в таблицу
rows.append(row(employe));
});
}
}
async function GetEmployes(id) {
const response = await fetch("api/home/departments/" + id, {
method: "GET",
headers: { "Accept": "application/json" }
});
// если запрос прошел нормально
if (response.ok === true) {
// получаем данные
const employes = await response.json();
let rows = document.querySelector("#employe");
employes.forEach(employe => {
// добавляем полученные элементы в таблицу
rows.append(row(employe));
});
}
}
async function GetEmployeCount(id) {
const response = await fetch("api/home/employes/count/" + id, {
method: "GET",
headers: { "Accept": "application/json" }
});
var result
const counts = await response.json();
counts.forEach(count => {
// добавляем полученные элементы в таблицу
result = count;
});
return result;
}
function row(employe) {
const tr = document.createElement("tr");
tr.setAttribute("employes", employe.id);
const idTd = document.createElement("td");
idTd.append(employe.id);
tr.append(idTd);
const link = document.createElement("td");
link.setAttribute("href", "" + employe.id);
link.append(employe.name);
tr.append(link);
const ageTd = document.createElement("td");
ageTd.append(employe.salary);
tr.append(ageTd);
const button = document.createElement("button");
button.setAttribute("id", employe.id);
button.setAttribute("onclick", "del(this);");
button.append("Удалить");
tr.append(button);
return tr;
}
function row(department) {
const tr = document.createElement("tr");
tr.setAttribute("data-rowid", department.id);
const idTd = document.createElement("td");
idTd.append(department.id);
tr.append(idTd);
const link = document.createElement("td");
link.setAttribute("href", "" + department.id);
link.append(department.name);
tr.append(link);
const ageTd = document.createElement("td");
ageTd.append(department.salary);
tr.append(ageTd);
const button = document.createElement("button");
button.setAttribute("id", department.id);
button.setAttribute("onclick", "func(this);");
button.append("Перейти");
tr.append(button);
return tr;
}
function del(obj) {
DeleteEmploye(obj.id);
}
function func(obj) {
var myNode = document.getElementById("employe");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
GetEmployes(obj.id);
};
function emp(obj) {
};
GetDepartments();
</script>
</body>
</html>
Простой
Теперь другая проблема 