Fix ugly buttons
This commit is contained in:
parent
1812d3bbef
commit
06e33c19c4
33
page-js.html
33
page-js.html
@ -82,32 +82,43 @@
|
||||
}
|
||||
const data = await response.json();
|
||||
data.forEach((element) => {
|
||||
const createTh = (value) => {
|
||||
const th = document.createElement("th");
|
||||
th.setAttribute("scope", "row");
|
||||
th.innerText = value;
|
||||
return th;
|
||||
};
|
||||
const createTd = (value) => {
|
||||
const td = document.createElement("td");
|
||||
td.innerText = value;
|
||||
return td;
|
||||
};
|
||||
const createButton = (text, type, action) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.setAttribute("type", "button");
|
||||
btn.classList.add("btn", type);
|
||||
btn.innerHTML = text;
|
||||
btn.addEventListener("click", action);
|
||||
const td = document.createElement("td");
|
||||
td.appendChild(btn);
|
||||
return td;
|
||||
};
|
||||
|
||||
const container = document.createElement("tr");
|
||||
const id = document.createElement("th");
|
||||
id.setAttribute("scope", "row");
|
||||
id.innerText = element.id;
|
||||
container.appendChild(id);
|
||||
container.classList.add("align-middle");
|
||||
container.appendChild(createTh(element.id));
|
||||
container.appendChild(createTd(element.last_name));
|
||||
container.appendChild(createTd(element.first_name));
|
||||
container.appendChild(createTd(element.bdate));
|
||||
container.appendChild(createTd(element.email));
|
||||
container.appendChild(createTd(element.phone));
|
||||
container.appendChild(createTd(element.group.name));
|
||||
const btn = document.createElement("button");
|
||||
btn.setAttribute("type", "button");
|
||||
btn.classList.add("btn", "btn-danger");
|
||||
btn.innerHTML = "Delete";
|
||||
container.appendChild(btn);
|
||||
btn.addEventListener("click", async () => {
|
||||
container.appendChild(
|
||||
createButton("Delete", "btn-danger", async () => {
|
||||
await deleteStudent(element.id);
|
||||
getStudents();
|
||||
});
|
||||
})
|
||||
);
|
||||
students.appendChild(container);
|
||||
});
|
||||
console.log(data);
|
||||
|
Loading…
Reference in New Issue
Block a user