Bài tập thực hành 8
I. Yêu cầu
Cấu trúc thư mục
I. Xử lý form và thêm dữ liệu vào bảng
- Giao diện trang chủ
- HTML
- JS
- CSS
Danh sách sinh viên
Dialog thêm sinh viên
Xác nhận xóa
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="assets/jquery-ui-1.13.2/jquery-ui.css">
<link rel="stylesheet" href="assets/custom/main.css">
</head>
<body>
<h1>Danh sách sinh viên</h1>
<button id="btnThem" style="margin-bottom: 10px;">Thêm sinh viên</button>
<table id="table-sinh-vien" class="border">
<thead>
<tr>
<th>#</th>
<th>Họ tên</th>
<th>Mã số</th>
<th>Ngày sinh</th>
<th>Hành động</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- Đây là container chứa các dialog -->
<!-- Các dialog cần phải ẩn đi => display: none -->
<div style="display: none;">
<div id="form-dialog" title="Thêm sinh viên">
<form>
<table>
<tr>
<td>Tên sinh viên</td>
<td><input type="text" name="ten"></td>
</tr>
<tr>
<td>Mã số sinh viên</td>
<td><input type="text" name="mssv"></td>
</tr>
<tr>
<td>Ngày sinh</td>
<td><input type="date" name="ngaySinh"></td>
</tr>
</table>
</form>
</div>
</div>
<script src="assets/jquery/jquery-3.6.1.js"></script>
<script src="assets/jquery-ui-1.13.2/jquery-ui.js"></script>
<script src="assets/custom/main.js"></script>
</body>
</html>
assets/custom/main.css
#table-sinh-vien {
width: 500px;
}
table.border {
border-spacing: 0px;
}
table.border tr td, table.border tr th {
padding: 10px;
border: thin solid rgb(59, 58, 58);
}
.text-center {
text-align: center;
}
input {
width: 100%;
}