JavaScript dan foydalanib ttj da turuvchi talabalar ro’yhatini shakllantiradigan tizim yaratish

JavaScript dan foydalanib TTJ da turuvchi talabalar ro’yhatini shakllantiradigan tizim yaratish

Bu uchun bizga Visual Studio Code yoki Web Storm kabi dasturlar yordam beradi. Meni kompyuterimda Visual Studio Code bo’lganligi uchun men shundan foydalandim.

Ilova uchun “HTML” shablonini va uslublarini yaratamiz. Buning uchun birinchi navbatda bitta fayl ochib olinadi va uni Visual Studio Code orqali ochib olamiz va ichiga “.html” fayli ochiladi. Va unga nom beriladi. “Index.html” Matn muharririni ochamiz va uni quyidagicha o'zgartiramiz:

Talabalar turar joyi

Talaba haqida Ism This field is empty Familiya This field is empty Otasini ismi This field is empty Kursi This field is empty Telefon raqam This field is empty

Ism Familiya Otasini ismi Kursi Telefon raqam

Keyin esa ushbu ilovaga dizayn beramiz. Buning uchun “.css” fayl orqali “Index.html” ga kiritilgan narsalarni ko’rinishi, rangi kata – kichikligi va shunga o’xshagan sifatlarni qo’shishimiz, qo’shilganlarni o’zgartirishimiz mumkin. Endi dizayn qismini ko’rib chiqmiz:
body > table {
width: 100%;
}
table {
border-collapse: collapse;
text-align: center;
}
table.list {
width: 100%;
text-align: center;
}


table.list td {
text-align: center;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even),
table.list thead>tr {
background-color: #dddddd;
}
input[type=text],
input[type=number] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
background-color: blue;
color: #000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
form {
background-color: #D6AB81;
padding: 10px;
}
from div.from-action-buttons {
text-align: center;
}
a {
cursor: pointer;
text-decoration: underline;
color: #00e;
margin-right: 4px;
}
label.validation-error {
color: red;
margin-left: 5px;
}
.hide {
display: none;
}
Ana endi so’ngi qadam qoldi ya’ni buni backend qismi. Buni JavaScriptda yozilgan. Ushbu JavaScript kodini ko’rib chiqamiz:
var selectedRow = null
function onFormSubmit() {
if (validate()) {
var formData = readFormData();
if (selectedRow == null) {
insertNewUser(formData);
}
else {
UpdateUser(formData)
}
}
}
function readFormData() {
var formData = {};
formData["Ism"] = document.getElementById("Ism").value;
formData["Familiya"] = document.getElementById("Familiya").value;
formData["Sharifi"] = document.getElementById("Sharifi").value;
formData["Kursi"] = document.getElementById("Kursi").value;
formData["Telefon"] = document.getElementById("Telefon").value;
return formData;
}
function insertNewUser(data) {
var table = document.getElementById().getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
celll = newRow.insertCell(0);
celll.innerHTML = data.Ism
cell2 = newRow.insertCell(0);
cell2.innerHTML = data.Familiya
cell3 = newRow.insertCell(0);
cell3.innerHTML = data.Sharifi
cell4 = newRow.insertCell(0);
cell4.innerHTML = data.Kursi
cell5 = newRow.insertCell(0);
cell5.innerHTML = data.Telefon
cell5.innerHTML = 'Edit Delete'
}
function resetForm() {
selectedRow = td.parentElement.parentElement;
document.getElementById("ism").value = selectedRow.cells[0].innerHTML;
document.getElementById("Familiya").value = selectedRow.cells[1].innerHTML;
document.getElementById("Sharifi").value = selectedRow.cells[2].innerHTML;
document.getElementById("Kursi").value = selectedRow.cells[3].innerHTML;
document.getElementById("Telefon").value = selectedRow.cells[4].innerHTML;
}
function UpdateUser(formData) {
selectedRow.cells[0].innerHTML = formData.Ism;
selectedRow.cells[1].innerHTML = formData.Familiya;
selectedRow.cells[2].innerHTML = formData.Sharifi;
selectedRow.cells[3].innerHTML = formData.Kursi;
selectedRow.cells[4].innerHTML = formData.Telefon;
}
function onDelete(td) {
if (confirm("Rostdan ham o'chirmoqchimisz?")) {
row = td.parentElement.parentElement;
document.getElementById("stdlist").deleteRow(row.rowIndex);
resetForm();
}
}
function validate() {
isValid = true;
if (document, getElementById("Ism").value == "") {
isValid = false;
document.getElementById("IsmvalidationError").classList.remove("hide");
} else {
isValid = true;
if (!document.getElementById("IsmvalidationError").classList.contains("hide")) {
document.getElementById("IsmvalidationError").classList.add("hide");
}
}
if (document, getElementById("Familiya").value == "") {
isValid = false;
document.getElementById("FamiyavalidationError").classList.remove("hide");
} else {
isValid = true;
if (!document.getElementById("FamiyavalidationError").classList.contains("hide")) {
document.getElementById("FamiyavalidationError").classList.add("hide");
}
}
if (document, getElementById("Sharifi").value == "") {
isValid = false;
document.getElementById("SharifivalidationError").classList.remove("hide");
} else {
isValid = true;
if (!document.getElementById("SharifivalidationError").classList.contains("hide")) {
document.getElementById("SharifivalidationError").classList.add("hide");
}
}
if (document, getElementById("Kursi").value == "") {
isValid = false;
document.getElementById("KursivalidationError").classList.remove("hide");
} else {
isValid = true;
if (!document.getElementById("KursivalidationError").classList.contains("hide")) {
document.getElementById("KursivalidationError").classList.add("hide");
}
}
if (document, getElementById("Telefon").value == "") {
isValid = false;
document.getElementById("TelefonvalidationError").classList.remove("hide");
} else {
isValid = true;
if (!document.getElementById("TelefonvalidationError").classList.contains("hide")) {
document.getElementById("TelefonvalidationError").classList.add("hide");
}
}
}
Ana endi ilovani ishga tushursa bo’ladi.