Name of code : Table HTML avec filtres et tooltip
Categorie : JS Avancer
Table HTML avec filtres et tooltip
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Tableau de villes</title>
<style>
body{
font-family: "Lato", sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: justify;
letter-spacing: 0.05em;
color: #333;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
form {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 8px;
}
label {
display: block;
font-size: 20px;
margin-right: 10px;
}
input[type="text"] {
background-color: #f2f2f2;
border: none;
padding: 10px;
border-radius: 5px;
font-size: 16px;
margin-right: 10px;
}
#tooltip {
visibility: hidden;
position: absolute;
z-index: 1;
top: 0;
left: 0;
padding: 5px;
background-color: #0c0c0c;
border: 1px solid #ccc;
font-size: 12px;
color: white;
border-radius: 5px;
}
</style>
</head>
<body>
<h1 style="text-align:center"> Table HTML avec filtres et tooltip</h1>
<form>
<label for="colonneInput"> Nom de colonne:</label>
<input type="text" id="colonneInput" onkeyup="filterTable()" placeholder="Entrez le nom de colonne">
<label for="ligneInput"> Nom de ville:</label>
<input type="text" id="ligneInput" onkeyup="filterTable()" placeholder="Entrez le nom de ville">
</form>
<div id="emptyTableMessage" style="display: none;"> Aucun résultat trouvé.</div>
<div id="noRowMatchMessage" style="display: none;"> Aucun résultat trouvé.</div>
<table id="myTable" >
<thead>
<tr>
<th> Ville</th>
<th> Pays</th>
<th> Population</th>
<th> Superficie (km²)</th>
<th> Densité de population (/km²)</th>
</tr>
</thead>
<tbody>
<tr>
<td> New York</td>
<td> États-Unis</td>
<td> 8,3 millions</td>
<td> 468,9</td>
<td> 17 400</td>
</tr>
<tr>
<td> Paris</td>
<td> France</td>
<td> 2,2 millions</td>
<td> 105,4</td>
<td> 20 800</td>
</tr>
<tr>
<td> Tokyo</td>
<td> Japon</td>
<td> 13,5 millions</td>
<td> 2 187,7</td>
<td> 6 169</td>
</tr>
<tr>
<td> Mexico</td>
<td> Mexique</td>
<td> 8,9 millions</td>
<td> 1 485,5</td>
<td> 5 800</td>
</tr>
<tr>
<td> Londres</td>
<td> Royaume-Uni</td>
<td> 8,9 millions</td>
<td> 1 572</td>
<td> 5 300</td>
</tr>
<tr>
<td> Moscou</td>
<td> Russie</td>
<td> 12,5 millions</td>
<td> 2 511</td>
<td> 4 700</td>
</tr>
<tr>
<td> Pékin</td>
<td> Chine</td>
<td> 21,7 millions</td>
<td> 16 801,25</td>
<td> 1 292</td>
</tr>
<tr>
<td> São Paulo</td>
<td> Brésil</td>
<td> 12,1 millions</td>
<td> 1 523</td>
<td> 8 000</td>
</tr>
<tr>
<td> Shanghai</td>
<td> Chine</td>
<td> 24,2 millions</td>
<td> 6 341</td>
<td> 3 821</td>
</tr>
<tr>
<td> Bombay (Mumbai)</td>
<td> Inde</td>
<td> 12,5 millions</td>
<td> 603,4</td>
<td> 20 741</td>
</tr>
<tr>
<td> Dhaka</td>
<td> Bangladesh</td>
<td> 21,0 millions</td>
<td> 360,0</td>
<td> 58 333</td>
</tr>
</tbody>
</table>
</body>
<script>
//-------------------------------------------------------------------------------------
// filterTable
//-------------------------------------------------------------------------------------
function filterTable() {
// Récupérer la valeur des deux inputs
var colonneInput = document.getElementById("colonneInput");
var ligneInput = document.getElementById("ligneInput");
var colonneFilter = colonneInput.value.toUpperCase();
var ligneFilter = ligneInput.value.toUpperCase();
// Récupérer le tableau, les colonnes et les lignes
var table = document.getElementById("myTable");
var headers = table.getElementsByTagName("th");
var rows = table.getElementsByTagName("tr");
// Parcourir toutes les colonnes et les lignes et cacher celles qui ne correspondent pas à la recherche
var isResultFound = false;
var isTableEmpty = true;
for (var i = 1; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
var header = headers[0];
var cell = cells[0];
var isRowVisible = false;
// Filtrer la ligne en fonction de la valeur de la première colonne
if (cell) {
if (cell.innerHTML.toUpperCase().indexOf(ligneFilter) > -1) {
isRowVisible = true;
isTableEmpty = false;
}
}
// Parcourir toutes les colonnes et les afficher/cacher en fonction de la recherche
var isColumnMatchFound = false;
for (var j = 1; j < headers.length; j++) {
header = headers[j];
cell = cells[j];
if (header.innerHTML.toUpperCase().indexOf(colonneFilter) > -1) {
header.style.display = "";
if (cell) {
cell.style.display = isRowVisible ? "" : "none";
isResultFound = true;
isColumnMatchFound = true;
}
} else {
header.style.display = "none";
if (cell) {
cell.style.display = "none";
}
}
}
// Afficher/cacher la ligne en fonction de la recherche
rows[i].style.display = isRowVisible ? "" : "none";
// Afficher un message si aucune correspondance trouvée
if (!isColumnMatchFound) {
rows[i].style.display = "none";
}
}
// Afficher un message si aucune correspondance trouvée
if (!isResultFound || isTableEmpty) {
var noResultRow = table.insertRow();
var noResultCell = noResultRow.insertCell();
noResultCell.colSpan = headers.length;
noResultCell.innerHTML = "Aucun résultat trouvé.";
}
}
//-------------------------------------------------------------------------------------
// tooltip
//-------------------------------------------------------------------------------------
// récupération du tableau
var table = document.getElementById("myTable");
// création de la bulle
var tooltip = document.createElement("div");
tooltip.setAttribute("id", "tooltip");
document.body.appendChild(tooltip);
// gestion de l'événement hover
table.addEventListener("mouseover", function(e) {
var target = e.target;
var th = table.getElementsByTagName("th")[target.cellIndex];
var tr = target.parentNode;
var td = tr.getElementsByTagName("td")[0];
var text = th.textContent + ": " + td.textContent;
tooltip.textContent = text;
tooltip.style.visibility = 'visible';
});
window.onmousemove = function (e) {
tooltip.style.display = 'block';
tooltip.style.left = e.pageX + 20 + 'px';
tooltip.style.top = e.pageY + 20 + 'px';
};
table.addEventListener("mouseout", function(e) {
tooltip.style.visibility = 'hidden';
});
</script>
</html>