Většina webů, které zobrazují seznam dat v tabulce, má obvykle implementovánu nějakou funkci filtru. To uživateli pomáhá filtrovat relevantní položky na základě textu, který zadávají do formuláře.
V tomto rychlém tutoriálu vytvoříme responzivní filtrovatelnou tabulku, která vypadá takto:
Tabulka bude obsahovat seznam vývojářů. Každý řádek obsahuje název, věk a programovací jazyk. Když uživatel zadá do vstupního pole, tabulka vyfiltruje a vrátí řádky, které odpovídají zadané hodnotě.
Během procesu vytváření tohoto se dozvíte o některých vlastnostech CSS a také o přístupu/manipulaci DOM pomocí JavaScriptu.
Ukázkový kód můžete získat z CodePen.
Začínáme
Ve složce projektu budete muset vytvořit tři jednoduché soubory. Jsou to index.html pro značku HTML styles.css pro styl a index.js pro skript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Filterable Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
Ujistěte se, že jste propojili svou šablonu stylů a soubor skriptu, jak jsem to udělal ve výše uvedeném HTML.
Značky HTML pro tabulku
Přidejte následující označení do body tagy:
<div class="app">
<input type="text" id="searchInput" placeholder="filter developer...">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<tbody id="names">
<tr>
<td>Kingsley</td>
<td>32</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Samuel</td>
<td>22</td>
<td>Python</td>
</tr>
<tr>
<td>Joyce</td>
<td>28</td>
<td>Ruby</td>
</tr>
<tr>
<td>Jake</td>
<td>29</td>
<td>Python</td>
</tr>
<tr>
<td>Daniel</td>
<td>40</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Mary</td>
<td>21</td>
<td>C</td>
</tr>
<tr>
<td>David</td>
<td>26</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Kelly</td>
<td>31</td>
<td>React</td>
</tr>
<tr>
<td>Cleo</td>
<td>43</td>
<td>Java</td>
</tr>
<tr>
<td>Peter</td>
<td>19</td>
<td>Vue</td>
</tr>
<tr>
<td>George</td>
<td>59</td>
<td>Cobol</td>
</tr>
<tr>
<td>James</td>
<td>29</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Ethan</td>
<td>22</td>
<td>PHP</td>
</tr>
<tr>
<td>Sandra</td>
<td>29</td>
<td>R</td>
</tr>
<tr>
<td>Pires</td>
<td>34</td>
<td>React Native</td>
</tr>
<tr>
<td>Martha</td>
<td>30</td>
<td>React</td>
</tr>
</tbody>
</table>
</div>
Prvním prvkem je vstup formuláře. Použijeme to ke shromažďování dat od uživatele.
Pak máme stůl. Tabulka se skládá z hlavy (thead ) a tělo (tbody ). Hlava má jednu řadu (tr ) údajů, což je nadpis. Tělo má 16 řádků dat, z nichž každý obsahuje jméno, věk a programovací jazyk.
Oba tyto prvky zabalíme do nadřazeného prvku div štítek. Pomohou nám se zarovnáním, jak uvidíme později v CSS.
Uložte soubor a otevřete aplikaci ve webovém prohlížeči.
Jak upravit styl tabulky pomocí CSS
Nyní na stůl aplikujeme nějaký styling. Nejprve nastavíme základní styly takto:
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");
/* Set no margin and padding around body. Set height to take up entire screen height. Align everything to the center, both horizontally and vertically */
body {
margin: 0;
height: 100vh;
padding: 0;
font-family: "lato", sans-seriff;
display: grid;
justify-content: center;
align-items: center;
font-size: 20px;
}
/* Remove border and outline around input. Set width to take up the entire width of parent and set margin on bottom */
#searchInput {
border: none;
outline: none;
width: 100%;
margin-bottom: 20px;
}
/* When input gains focus, add a blue border below it */
#searchInput:focus {
border-bottom: 2px solid #4575b6;
}
Tabulka se zarovná na střed.
Aby tabulka vypadala lépe, můžeme použít následující pravidla stylingu:
/* Sets width of table container (div) to 80% of browser window's width and the height to 100% of window's height. `vh` and `vw` makes the table responsive because it scales along with screen size. Also set margin of 20px to top and bottom */
.app {
width: 80vw;
height: 100vh;
margin: 20px 0;
}
/* Collapse all borders separating each cell. Table takes up entire width of .app. Set gray shadow around table */
table {
border-collapse: collapse;
width: 100%;
box-shadow: 0 5px 7px gray;
}
/* Set shadow on just the table head */
thead {
box-shadow: 0px 0px 10px gray;
}
/* Add some space around table heading. Align text to right and transform to uppercase */
th {
padding: 1rem 3rem;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
}
/* Add padding on each cell */
td {
padding: 0.5rem 3rem;
font-size: 1rem;
}
/* Create alternating color(blue) across the rows. Set blue on all even ones (2, 4, 6 ...) */
tr:nth-child(even) {
background-color: #dee8f5;
}
Nyní naše tabulka vypadá o něco lépe a je také responzivní.
Jak implementovat funkci filtru pomocí JavaScriptu
Tabulka je v tomto bodě do značné míry statická. Pomocí JavaScriptu implementujeme logiku pro filtrování jmen na základě toho, co uživatel zadá do pole formuláře.
V souboru skriptu definujte funkci nazvanou filter . V prvních třech řádcích přistupujeme k vstupní hodnotě uživatele, předáme tělo tabulky <tbody> do proměnné names a nakonec přístup ke všem řádkům tabulky <tr> zevnitř <tbody> .
Také změníme hodnotu na velká písmena, abychom se ujistili, že je vše konzistentní (uživatel může zadat „j“ místo „J“).
/* This function will check for the user's input and based on that will either hide or display a particular row */
function filter() {
// Access text value and elements from the DOM
let value = document.getElementById("searchInput").value.toUpperCase();
let names = document.getElementById("names");
let rows = names.getElementsByTagName("tr");
// Code continues
Dále procházíme každé pole. Pro každý řádek vstoupíme do posledního sloupce (sloupec jazyka) a získáme jeho textový obsah (skutečná hodnota).
for (i = 0; i < rows.length; i++) {
let column = rows[i].getElementsByTagName("td")[2];
let language = column.textContent;
rows[i].style.display =
language.toUpperCase().indexOf(value) > -1 ? "" : "none";
}
}
document.getElementById("searchInput").addEventListener("keyup", filter);
Pokud skutečná hodnota řetězce z tabulky obsahuje některou z hodnot uživatele z jejich vstupu, zobrazíme tento řádek. Jinak to schováme. Také jsme použili ternární operátor ke zkrácení podmíněného příkazu.
Nakonec na vstup přidáme posluchač události. Pokaždé, když je klávesa uvolněna, bude vyvolán filtr.
Zde je úplný kód:
function filter() {
let value = document.getElementById("searchInput").value.toUpperCase();
var names = document.getElementById("names");
var rows = names.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
let column = rows[i].getElementsByTagName("td")[2];
let language = column.textContent;
rows[i].style.display =
language.toUpperCase().indexOf(value) > -1 ? "" : "none";
}
}
document.getElementById("searchInput").addEventListener("keyup", filter);
Vaše tabulka by nakonec měla vypadat podobně jako tato:
Zabalení
Pouze pomocí HTML, CSS a JavaScriptu můžete vytvořit opravdu stylové prvky s pokročilými funkcemi.
Doufám, že jste se z toho něco nebo dvě naučili. Opět se můžete podívat na kód na CodePen a vyladit jej, jak chcete.
Děkujeme, že nás sledujete.