\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/title>\n\n \n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\">\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@400;500;700&family=Sarabun:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\n \n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f0f4f8; \/* A light, clean blue-gray background *\/\n }\n \n h1, h2, h3, h4, h5, h6, .nav-link {\n font-family: 'Kanit', sans-serif;\n }\n\n \/* --- Header Section --- *\/\n .header-section {\n position: relative;\n padding: 5rem 0;\n background-image: url('https:\/\/images.pexels.com\/photos\/5212345\/pexels-photo-5212345.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');\n background-size: cover;\n background-position: center;\n color: white;\n text-align: center;\n }\n\n .header-section::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: linear-gradient(45deg, rgba(0, 58, 112, 0.7), rgba(25, 135, 84, 0.7));\n }\n\n .header-content {\n position: relative;\n z-index: 1;\n }\n\n .header-content h1 {\n font-size: clamp(2.5rem, 5vw, 3.5rem);\n font-weight: 700;\n text-shadow: 2px 2px 5px rgba(0,0,0,0.3);\n }\n\n \/* --- Year Selector Tabs --- *\/\n .year-selector-nav {\n border-bottom: 2px solid #dee2e6;\n }\n .year-selector-nav .nav-link {\n font-size: 1.1rem;\n font-weight: 500;\n color: #6c757d;\n border: none;\n border-bottom: 2px solid transparent;\n margin-bottom: -2px;\n transition: all 0.3s ease;\n }\n .year-selector-nav .nav-link:hover {\n color: #007bff;\n border-bottom-color: #007bff;\n }\n .year-selector-nav .nav-link.active {\n color: #0d6efd;\n font-weight: 700;\n background-color: transparent;\n border-color: #0d6efd;\n }\n\n \/* --- Data Display Card --- *\/\n .data-card {\n border-radius: 20px;\n border: none;\n box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n \n .data-card-header {\n background: linear-gradient(135deg, #0d6efd, #0dcaf0);\n color: white;\n padding: 1.5rem;\n }\n\n .data-card-header h2 {\n font-size: 1.75rem;\n margin-bottom: 0;\n }\n \n \/* --- Table Styling --- *\/\n .table {\n margin-bottom: 0;\n }\n .table thead th {\n background-color: #e9ecef;\n color: #212529;\n font-weight: 700;\n font-family: 'Kanit', sans-serif;\n vertical-align: middle;\n text-align: center;\n border-bottom-width: 2px;\n }\n .table tbody tr:hover {\n background-color: #f8f9fa;\n }\n .table td, .table th {\n text-align: center;\n vertical-align: middle;\n }\n .table .class-name {\n text-align: left;\n padding-left: 1.5rem;\n font-weight: 500;\n }\n .table .sub-total-row {\n background-color: #cfe2ff;\n font-weight: 700;\n }\n .table .grand-total-row {\n background-color: #ffc107;\n color: #212529;\n font-weight: 700;\n font-size: 1.1rem;\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"header-section\">\n <div class=\"header-content\">\n <h1><i class=\"bi bi-people-fill me-3\"><\/i>\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/h1>\n <p class=\"lead\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/p>\n <\/div>\n <\/header>\n\n \n <main class=\"container my-5\">\n \n \n <div class=\"d-flex justify-content-center mb-4\">\n <ul class=\"nav year-selector-nav\" id=\"year-selector\" role=\"tablist\">\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link active\" data-year=\"2568\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2568<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2567\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2567<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2566\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2566<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2565\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2565<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2564\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2564<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2563\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2563<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2562\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2562<\/button>\n <\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"card data-card\">\n <div class=\"data-card-header text-center\">\n <h2 id=\"data-title\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2568<\/h2>\n <\/div>\n <div class=\"table-responsive\">\n <table class=\"table table-striped table-hover\">\n <thead>\n <tr>\n <th style=\"width: 25%;\">\u0e0a\u0e31\u0e49\u0e19<\/th>\n <th colspan=\"2\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/th>\n <th style=\"width: 20%;\">\u0e23\u0e27\u0e21<\/th>\n <th style=\"width: 20%;\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/th>\n <\/tr>\n <tr>\n <th><\/th>\n <th style=\"width: 17.5%;\">\u0e0a\u0e32\u0e22<\/th>\n <th style=\"width: 17.5%;\">\u0e2b\u0e0d\u0e34\u0e07<\/th>\n <th><\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"data-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <div class=\"card-footer text-muted text-center\" id=\"data-footer\">\n \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e13 10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2568\n <\/div>\n <\/div>\n\n <\/main>\n\n \n <footer class=\"bg-dark text-white text-center p-4 mt-5\">\n <div class=\"container\">\n <p class=\"mb-0\">© \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 | \u0e2a\u0e1e\u0e1b.\u0e2a\u0e23\u0e30\u0e41\u0e01\u0e49\u0e27 \u0e40\u0e02\u0e15 1<\/p>\n <\/div>\n <\/footer>\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n\n \n <script>\n \/\/ Data for all academic years. \n \/\/ Updated with the provided images.\n const studentData = {\n \"2568\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2568\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 6, female: 6, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 7, female: 11, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 5, female: 4, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 6, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 9, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 7, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 16, female: 12, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 8, female: 7, rooms: 1 },\n ]\n },\n \"2567\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2567\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 7, female: 10, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 11, female: 2, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 7, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 6, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 6, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 14, female: 11, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 8, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 7, female: 6, rooms: 1 },\n ]\n },\n \"2566\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2566\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 10, female: 4, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 7, female: 10, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 7, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 6, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 14, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 8, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 8, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 6, female: 8, rooms: 1 },\n ]\n },\n \"2565\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2565\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 8, female: 9, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 8, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 7, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 13, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 8, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 8, female: 5, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 7, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 8, female: 8, rooms: 1 },\n ]\n },\n \"2564\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2564\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 9, female: 9, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 7, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 13, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 7, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 10, female: 5, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 7, female: 5, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 9, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 10, female: 10, rooms: 1 },\n ]\n },\n \"2563\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2563\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 6, female: 6, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 14, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 8, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 10, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 10, female: 5, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 10, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 13, female: 10, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 14, female: 8, rooms: 1 },\n ]\n },\n \"2562\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2562\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 16, female: 7, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 9, female: 10, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 10, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 11, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 7, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 13, female: 10, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 14, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 7, female: 9, rooms: 1 },\n ]\n },\n };\n\n function renderTable(year) {\n const yearData = studentData[year].data;\n const tableBody = document.getElementById('data-table-body');\n let tableHtml = '';\n\n let kindergartenMale = 0, kindergartenFemale = 0, kindergartenRooms = 0;\n let primaryMale = 0, primaryFemale = 0, primaryRooms = 0;\n\n \/\/ Kindergarten section\n yearData.filter(c => c.class.startsWith('\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25')).forEach(c => {\n const total = c.male + c.female;\n kindergartenMale += c.male;\n kindergartenFemale += c.female;\n kindergartenRooms += c.rooms;\n tableHtml += `\n <tr>\n <td class=\"class-name\">${c.class}<\/td>\n <td>${c.male}<\/td>\n <td>${c.female}<\/td>\n <td><strong>${total}<\/strong><\/td>\n <td>${c.rooms}<\/td>\n <\/tr>\n `;\n });\n\n const kindergartenTotal = kindergartenMale + kindergartenFemale;\n tableHtml += `\n <tr class=\"sub-total-row\">\n <td class=\"class-name\">\u0e23\u0e27\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25<\/td>\n <td>${kindergartenMale}<\/td>\n <td>${kindergartenFemale}<\/td>\n <td>${kindergartenTotal}<\/td>\n <td>${kindergartenRooms}<\/td>\n <\/tr>\n `;\n\n \/\/ Primary section\n yearData.filter(c => c.class.startsWith('\u0e1b\u0e23\u0e30\u0e16\u0e21')).forEach(c => {\n const total = c.male + c.female;\n primaryMale += c.male;\n primaryFemale += c.female;\n primaryRooms += c.rooms;\n tableHtml += `\n <tr>\n <td class=\"class-name\">${c.class}<\/td>\n <td>${c.male}<\/td>\n <td>${c.female}<\/td>\n <td><strong>${total}<\/strong><\/td>\n <td>${c.rooms}<\/td>\n <\/tr>\n `;\n });\n\n const primaryTotal = primaryMale + primaryFemale;\n tableHtml += `\n <tr class=\"sub-total-row\">\n <td class=\"class-name\">\u0e23\u0e27\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e23\u0e30\u0e16\u0e21<\/td>\n <td>${primaryMale}<\/td>\n <td>${primaryFemale}<\/td>\n <td>${primaryTotal}<\/td>\n <td>${primaryRooms}<\/td>\n <\/tr>\n `;\n \n \/\/ Grand total\n const grandTotalMale = kindergartenMale + primaryMale;\n const grandTotalFemale = kindergartenFemale + primaryFemale;\n const grandTotalStudents = kindergartenTotal + primaryTotal;\n const grandTotalRooms = kindergartenRooms + primaryRooms;\n \n tableHtml += `\n <tr class=\"grand-total-row\">\n <td class=\"class-name\">\u0e23\u0e27\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2a\u0e34\u0e49\u0e19<\/td>\n <td>${grandTotalMale}<\/td>\n <td>${grandTotalFemale}<\/td>\n <td>${grandTotalStudents}<\/td>\n <td>${grandTotalRooms}<\/td>\n <\/tr>\n `;\n\n tableBody.innerHTML = tableHtml;\n \n \/\/ Update title and footer\n document.getElementById('data-title').innerText = `\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 ${year}`;\n document.getElementById('data-footer').innerText = `\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e13 ${studentData[year].date}`;\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n const yearSelector = document.getElementById('year-selector');\n \n yearSelector.addEventListener('click', (event) => {\n if (event.target.tagName === 'BUTTON') {\n \/\/ Remove active class from all buttons\n yearSelector.querySelectorAll('.nav-link').forEach(btn => btn.classList.remove('active'));\n \/\/ Add active class to the clicked button\n event.target.classList.add('active');\n \n const selectedYear = event.target.dataset.year;\n renderTable(selectedYear);\n }\n });\n\n \/\/ Initial render for the default active year\n renderTable('2568');\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":2,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":35,"date":"2025-08-05T10:47:03","date_gmt":"2025-08-05T03:47:03","guid":{"rendered":"https:\/\/ksd.ac.th\/web\/?page_id=35"},"modified":"2025-08-05T10:57:43","modified_gmt":"2025-08-05T03:57:43","slug":"%e0%b8%aa%e0%b8%96%e0%b8%b4%e0%b8%95%e0%b8%b4%e0%b8%82%e0%b9%89%e0%b8%ad%e0%b8%a1%e0%b8%b9%e0%b8%a5%e0%b8%99%e0%b8%b1%e0%b8%81%e0%b9%80%e0%b8%a3%e0%b8%b5%e0%b8%a2%e0%b8%99","status":"publish","type":"page","link":"https:\/\/ksd.ac.th\/web\/?page_id=35","title":{"rendered":"\u0e2a\u0e16\u0e34\u0e15\u0e34\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19"},"content":{"rendered":"\n\n\n\n \n \n \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/title>\n\n \n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\">\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@400;500;700&family=Sarabun:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\n \n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f0f4f8; \/* A light, clean blue-gray background *\/\n }\n \n h1, h2, h3, h4, h5, h6, .nav-link {\n font-family: 'Kanit', sans-serif;\n }\n\n \/* --- Header Section --- *\/\n .header-section {\n position: relative;\n padding: 5rem 0;\n background-image: url('https:\/\/images.pexels.com\/photos\/5212345\/pexels-photo-5212345.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');\n background-size: cover;\n background-position: center;\n color: white;\n text-align: center;\n }\n\n .header-section::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: linear-gradient(45deg, rgba(0, 58, 112, 0.7), rgba(25, 135, 84, 0.7));\n }\n\n .header-content {\n position: relative;\n z-index: 1;\n }\n\n .header-content h1 {\n font-size: clamp(2.5rem, 5vw, 3.5rem);\n font-weight: 700;\n text-shadow: 2px 2px 5px rgba(0,0,0,0.3);\n }\n\n \/* --- Year Selector Tabs --- *\/\n .year-selector-nav {\n border-bottom: 2px solid #dee2e6;\n }\n .year-selector-nav .nav-link {\n font-size: 1.1rem;\n font-weight: 500;\n color: #6c757d;\n border: none;\n border-bottom: 2px solid transparent;\n margin-bottom: -2px;\n transition: all 0.3s ease;\n }\n .year-selector-nav .nav-link:hover {\n color: #007bff;\n border-bottom-color: #007bff;\n }\n .year-selector-nav .nav-link.active {\n color: #0d6efd;\n font-weight: 700;\n background-color: transparent;\n border-color: #0d6efd;\n }\n\n \/* --- Data Display Card --- *\/\n .data-card {\n border-radius: 20px;\n border: none;\n box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n \n .data-card-header {\n background: linear-gradient(135deg, #0d6efd, #0dcaf0);\n color: white;\n padding: 1.5rem;\n }\n\n .data-card-header h2 {\n font-size: 1.75rem;\n margin-bottom: 0;\n }\n \n \/* --- Table Styling --- *\/\n .table {\n margin-bottom: 0;\n }\n .table thead th {\n background-color: #e9ecef;\n color: #212529;\n font-weight: 700;\n font-family: 'Kanit', sans-serif;\n vertical-align: middle;\n text-align: center;\n border-bottom-width: 2px;\n }\n .table tbody tr:hover {\n background-color: #f8f9fa;\n }\n .table td, .table th {\n text-align: center;\n vertical-align: middle;\n }\n .table .class-name {\n text-align: left;\n padding-left: 1.5rem;\n font-weight: 500;\n }\n .table .sub-total-row {\n background-color: #cfe2ff;\n font-weight: 700;\n }\n .table .grand-total-row {\n background-color: #ffc107;\n color: #212529;\n font-weight: 700;\n font-size: 1.1rem;\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"header-section\">\n <div class=\"header-content\">\n <h1><i class=\"bi bi-people-fill me-3\"><\/i>\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/h1>\n <p class=\"lead\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/p>\n <\/div>\n <\/header>\n\n \n <main class=\"container my-5\">\n \n \n <div class=\"d-flex justify-content-center mb-4\">\n <ul class=\"nav year-selector-nav\" id=\"year-selector\" role=\"tablist\">\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link active\" data-year=\"2568\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2568<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2567\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2567<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2566\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2566<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2565\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2565<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2564\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2564<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2563\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2563<\/button>\n <\/li>\n <li class=\"nav-item\" role=\"presentation\">\n <button class=\"nav-link\" data-year=\"2562\">\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2562<\/button>\n <\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"card data-card\">\n <div class=\"data-card-header text-center\">\n <h2 id=\"data-title\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2568<\/h2>\n <\/div>\n <div class=\"table-responsive\">\n <table class=\"table table-striped table-hover\">\n <thead>\n <tr>\n <th style=\"width: 25%;\">\u0e0a\u0e31\u0e49\u0e19<\/th>\n <th colspan=\"2\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/th>\n <th style=\"width: 20%;\">\u0e23\u0e27\u0e21<\/th>\n <th style=\"width: 20%;\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/th>\n <\/tr>\n <tr>\n <th><\/th>\n <th style=\"width: 17.5%;\">\u0e0a\u0e32\u0e22<\/th>\n <th style=\"width: 17.5%;\">\u0e2b\u0e0d\u0e34\u0e07<\/th>\n <th><\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"data-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <div class=\"card-footer text-muted text-center\" id=\"data-footer\">\n \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e13 10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2568\n <\/div>\n <\/div>\n\n <\/main>\n\n \n <footer class=\"bg-dark text-white text-center p-4 mt-5\">\n <div class=\"container\">\n <p class=\"mb-0\">© \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 | \u0e2a\u0e1e\u0e1b.\u0e2a\u0e23\u0e30\u0e41\u0e01\u0e49\u0e27 \u0e40\u0e02\u0e15 1<\/p>\n <\/div>\n <\/footer>\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n\n \n <script>\n \/\/ Data for all academic years. \n \/\/ Updated with the provided images.\n const studentData = {\n \"2568\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2568\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 6, female: 6, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 7, female: 11, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 5, female: 4, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 6, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 9, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 7, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 16, female: 12, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 8, female: 7, rooms: 1 },\n ]\n },\n \"2567\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2567\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 7, female: 10, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 11, female: 2, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 7, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 6, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 6, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 14, female: 11, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 8, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 7, female: 6, rooms: 1 },\n ]\n },\n \"2566\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2566\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 10, female: 4, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 7, female: 10, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 7, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 6, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 14, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 8, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 8, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 6, female: 8, rooms: 1 },\n ]\n },\n \"2565\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2565\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 8, female: 9, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 8, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 7, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 13, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 8, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 8, female: 5, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 7, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 8, female: 8, rooms: 1 },\n ]\n },\n \"2564\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2564\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 9, female: 9, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 7, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 13, female: 7, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 7, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 10, female: 5, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 7, female: 5, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 9, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 10, female: 10, rooms: 1 },\n ]\n },\n \"2563\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2563\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 6, female: 6, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 14, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 8, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 10, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 10, female: 5, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 10, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 13, female: 10, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 14, female: 8, rooms: 1 },\n ]\n },\n \"2562\": {\n date: \"10 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2562\",\n data: [\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 2', male: 16, female: 7, rooms: 1 },\n { class: '\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25 3', male: 9, female: 10, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 1', male: 10, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 2', male: 11, female: 6, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 3', male: 7, female: 9, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 4', male: 13, female: 10, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 5', male: 14, female: 8, rooms: 1 },\n { class: '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1b\u0e35\u0e17\u0e35\u0e48 6', male: 7, female: 9, rooms: 1 },\n ]\n },\n };\n\n function renderTable(year) {\n const yearData = studentData[year].data;\n const tableBody = document.getElementById('data-table-body');\n let tableHtml = '';\n\n let kindergartenMale = 0, kindergartenFemale = 0, kindergartenRooms = 0;\n let primaryMale = 0, primaryFemale = 0, primaryRooms = 0;\n\n \/\/ Kindergarten section\n yearData.filter(c => c.class.startsWith('\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25')).forEach(c => {\n const total = c.male + c.female;\n kindergartenMale += c.male;\n kindergartenFemale += c.female;\n kindergartenRooms += c.rooms;\n tableHtml += `\n <tr>\n <td class=\"class-name\">${c.class}<\/td>\n <td>${c.male}<\/td>\n <td>${c.female}<\/td>\n <td><strong>${total}<\/strong><\/td>\n <td>${c.rooms}<\/td>\n <\/tr>\n `;\n });\n\n const kindergartenTotal = kindergartenMale + kindergartenFemale;\n tableHtml += `\n <tr class=\"sub-total-row\">\n <td class=\"class-name\">\u0e23\u0e27\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25<\/td>\n <td>${kindergartenMale}<\/td>\n <td>${kindergartenFemale}<\/td>\n <td>${kindergartenTotal}<\/td>\n <td>${kindergartenRooms}<\/td>\n <\/tr>\n `;\n\n \/\/ Primary section\n yearData.filter(c => c.class.startsWith('\u0e1b\u0e23\u0e30\u0e16\u0e21')).forEach(c => {\n const total = c.male + c.female;\n primaryMale += c.male;\n primaryFemale += c.female;\n primaryRooms += c.rooms;\n tableHtml += `\n <tr>\n <td class=\"class-name\">${c.class}<\/td>\n <td>${c.male}<\/td>\n <td>${c.female}<\/td>\n <td><strong>${total}<\/strong><\/td>\n <td>${c.rooms}<\/td>\n <\/tr>\n `;\n });\n\n const primaryTotal = primaryMale + primaryFemale;\n tableHtml += `\n <tr class=\"sub-total-row\">\n <td class=\"class-name\">\u0e23\u0e27\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e23\u0e30\u0e16\u0e21<\/td>\n <td>${primaryMale}<\/td>\n <td>${primaryFemale}<\/td>\n <td>${primaryTotal}<\/td>\n <td>${primaryRooms}<\/td>\n <\/tr>\n `;\n \n \/\/ Grand total\n const grandTotalMale = kindergartenMale + primaryMale;\n const grandTotalFemale = kindergartenFemale + primaryFemale;\n const grandTotalStudents = kindergartenTotal + primaryTotal;\n const grandTotalRooms = kindergartenRooms + primaryRooms;\n \n tableHtml += `\n <tr class=\"grand-total-row\">\n <td class=\"class-name\">\u0e23\u0e27\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2a\u0e34\u0e49\u0e19<\/td>\n <td>${grandTotalMale}<\/td>\n <td>${grandTotalFemale}<\/td>\n <td>${grandTotalStudents}<\/td>\n <td>${grandTotalRooms}<\/td>\n <\/tr>\n `;\n\n tableBody.innerHTML = tableHtml;\n \n \/\/ Update title and footer\n document.getElementById('data-title').innerText = `\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 ${year}`;\n document.getElementById('data-footer').innerText = `\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e13 ${studentData[year].date}`;\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n const yearSelector = document.getElementById('year-selector');\n \n yearSelector.addEventListener('click', (event) => {\n if (event.target.tagName === 'BUTTON') {\n \/\/ Remove active class from all buttons\n yearSelector.querySelectorAll('.nav-link').forEach(btn => btn.classList.remove('active'));\n \/\/ Add active class to the clicked button\n event.target.classList.add('active');\n \n const selectedYear = event.target.dataset.year;\n renderTable(selectedYear);\n }\n });\n\n \/\/ Initial render for the default active year\n renderTable('2568');\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":2,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}