66 lines
2.2 KiB
HTML
66 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Mitarbeiter Qualifikation</title>
|
|
<style>
|
|
table { width: 50%; border-collapse: collapse; margin-top: 20px; }
|
|
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
|
|
th { background-color: #f4f4f4; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<label for="qualiSelect">Qualifikation:</label>
|
|
<select id="qualiSelect" onchange="loadMitarbeiter(this.value)">
|
|
<option value="">- Bitte Auswählen -</option>
|
|
<option value="Java">Java</option>
|
|
<option value="HTML">HTML</option>
|
|
<option value="CSS">CSS</option>
|
|
<option value="RedisDB">RedisDB</option>
|
|
<option value="MySQL">MySQL</option>
|
|
</select>
|
|
|
|
<table id="resultTable" style="display:none;">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Qualifikation</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody"></tbody>
|
|
</table>
|
|
|
|
<script>
|
|
function loadMitarbeiter(quali) {
|
|
if (!quali) {
|
|
document.getElementById('resultTable').style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
// AJAX-Anfrage über GET senden
|
|
fetch(`backend.php?qualifikation=${encodeURIComponent(quali)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const tbody = document.getElementById('tableBody');
|
|
tbody.innerHTML = ''; // Alte Ergebnisse löschen
|
|
|
|
if(data.length > 0) {
|
|
data.forEach(mitarbeiter => {
|
|
const row = `<tr>
|
|
<td>${mitarbeiter.name}</td>
|
|
<td>${mitarbeiter.qualifikation}</td>
|
|
</tr>`;
|
|
tbody.innerHTML += row;
|
|
});
|
|
document.getElementById('resultTable').style.display = 'table';
|
|
} else {
|
|
tbody.innerHTML = '<tr><td colspan="2">Keine Mitarbeiter gefunden.</td></tr>';
|
|
document.getElementById('resultTable').style.display = 'table';
|
|
}
|
|
})
|
|
.catch(error => console.error('Fehler:', error));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |