2021-11-05 18:32:00 +01:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "Exemple d'utilisation de FreeDatas2HTML pour parser et adapter l'affichage d'un tableau HTML." >
< meta name = "robots" content = "index, follow" >
< link rel = "stylesheet" href = "CSS/paper.min.css" >
< link rel = "stylesheet" href = "CSS/fd2html.css" >
< script src = "JS/exampleWithHTML.app.js" defer > < / script >
2021-11-08 11:00:49 +01:00
< script src = "JS/matomo.js" defer > < / script > <!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation : - ) -->
2021-11-05 18:32:00 +01:00
< title > Parser et afficher un tableau HTML via FreeDatas2HTML< / title >
< / head >
< body class = "paper container" >
< h1 > FreeDatas2HTML< / h1 >
< h2 > Parser un tableau HTML pour adapter son affichage< / h2 >
< div class = "row" >
< div id = "filtre1" class = "sm-12 md-6 lg-6 col" > < / div >
< div id = "paginationOptions" class = "sm-12 md-6 lg-6 col" > < / div >
< / div >
< h3 > Nombre total de résultats : < span id = "compteur" > < / span > < / h3 >
< article id = "datas" >
< table >
< thead >
< tr >
< th > Séquence< / th > < th > Signification< / th > < th > Décrit en section< / th > < th > Version CSS< / th >
< / tr >
< /thead
< tbody >
< tr > < td > *< / td > < td > tout élément< / td > < td > Sélecteur universel< / td > < td > 2< / td > < / tr >
< tr > < td > E< / td > < td > tout élément de type E< / td > < td > Sélecteur de type d'élément< / td > < td > 1< / td > < / tr >
< tr > < td > E[foo]< / td > < td > tout élément E portant l'attribut "foo"< / td > < td > Sélecteurs d'attribut< / td > < td > 2< / td > < / tr >
< tr > < td > E[foo="bar"]< / td > < td > tout élément E portant l'attribut"
foo" et dont la valeur de cet attribut est exactement "bar"< / td > < td > Sélecteurs d'attribut< / td > < td > 2< / td > < / tr >
< tr > < td > E[foo~="bar"]< / td > < td > tout élément E dont l'attribut "foo"
contient une liste de valeurs séparées par des espaces, l'une
de ces valeurs étant exactement égale à "bar"< / td > < td > Sélecteurs d'attribut< / td > < td > 2< / td > < / tr >
< tr > < td > E[foo^="bar"]< / td > < td > tout élément E dont la valeur de l'attribut
"foo" commence exactement par la chaîne "bar"< / td > < td > Sélecteurs d'attribut< / td > < td > 3< / td > < / tr >
< tr > < td > E[foo$="bar"]< / td > < td > tout élément E dont la valeur de l'attribut
"foo" finit exactement par la chaîne "bar"< / td > < td > Sélecteurs d'attribut< / td > < td > 3< / td > < / tr >
< tr > < td > E[foo*="bar"]< / td > < td > tout élément E dont la valeur de l'attribut
"foo" contient la sous-chaîne "bar"< / td > < td > Sélecteurs d'attribut< / td > < td > 3< / td > < / tr >
< tr > < td > E[lang|="en"]< / td > < td > tout élément E dont l'attribut 'lang"
est une liste de valeurs séparées par des tirets et commençant
(à gauche) par "en"< / td > < td > Sélecteurs d'attribut< / td > < td > 2< / td > < / tr >
< tr > < td > E:root< / td > < td > un élément E, racine du document< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr > < td > E:nth-child(n)< / td > < td > un élément E qui est le n-ième enfant
de son parent< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr > < td > E:nth-last-child(n)< / td > < td > un élément E qui est le n-ième enfant
de son parent en comptant depuis le dernier enfant< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr > < td > E:nth-of-type(n)< / td > < td > un élément E qui est le n-ième enfant
de son parent et de ce type< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr > < td > E:nth-last-of-type(n)< / td > < td > un élément E qui est le n-ième enfant
de son parent et de ce type en comptant depuis le dernier enfant< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr > < td > E:first-child< / td > < td > un élément E, premier enfant de son parent< / td > < td > Pseudo-classes structurelles< / td > < td > 2< / td > < / tr >
< tr > < td > E:last-child< / td > < td > un élément E, dernier enfant de son parent< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr > < td > E:first-of-type< / td > < td > un élément E, premier enfant de son type< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr > < td > E:last-of-type< / td > < td > un élément E, dernier enfant de son type< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr >
< td height = "19" > E:only-child< / td > < td height = "19" > un élément E, seul enfant de
son parent< / td > < td height = "19" > Pseudo-classes
structurelles< / td > < td height = "19" > 3< / td > < / tr >
< tr > < td > E:only-of-type< / td > < td > un élément E, seul enfant de son type< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr > < td > E:empty< / td > < td > un élément E qui n'a aucun enfant (y compris
noeuds textuels purs)< / td > < td > Pseudo-classes structurelles< / td > < td > 3< / td > < / tr >
< tr > < td > E:link < br >
E:visited< / td > < td > un élément E qui est la source d'un hyperlien
dont la cible n'a pas encore été visitée (:link) ou
a déjà été visitée (:visited)< / td > < td > Les pseudo-classes de lien< / td > < td > 1< / td > < / tr >
< tr > < td > E:active < br >
E:hover < br >
E:focus< / td > < td > un élément E pendant certaines actions de
l'usager< / td > < td > Les pseudo-classes d'action
Usager < / td > < td > 1 and 2< / td > < / tr >
< tr > < td > E:target< / td > < td > un élément E qui est la cible de l'URL d'origine
contenant lui-même un fragment identifiant.< / td > < td > La pseudo-classe :target< / td > < td > 3< / td > < / tr >
< tr > < td > E:lang(c)< / td > < td > un élément E dont le langage (humain) est
c (le langage du document spécifie comment le langage humain est
déterminé)< / td > < td > La pseudo-classe :lang() < / td > < td > 2< / td > < / tr >
< tr > < td > E:enabled< br >
E:disabled < / td > < td > un élément d'interface utilisateur E qui
est actif ou inactif.< / td > < td > Les pseudo-classes d'état
d'élément d'interface< / td > < td > 3< / td > < / tr >
< tr > < td > E:checked< br >
E:indeterminate < / td > < td > un élément d'interface utilisateur E qui
est coché ou dont l'état est indéterminé (par
exemple un bouton-radio ou une case à cocher)< / td > < td > Les pseudo-classes d'état
d'élément d'interface< / td > < td > 3< / td > < / tr >
< tr > < td > E:contains("foo")< / td > < td > un élément E dont le contenu textuel concaténé
contient la sous-chaîne "foo"< / td > < td > La pseudo-classe de contenu< / td > < td > 3< / td > < / tr >
< tr > < td > E::first-line< / td > < td > la première ligne formatée d'un élément
E< / td > < td > The :first-line pseudo-element< / td > < td > 1< / td > < / tr >
< tr > < td > E::first-letter< / td > < td > le premier caractère formaté d'un élément
E< / td > < td > Le pseudo-élément
::first-letter < / td > < td > 1< / td > < / tr >
< tr > < td > E::selection< / td > < td > la partie d'un élément E qui est actuellement
sélectionnée/mise en exergue par l'usager< / td > < td > Les pseudo-éléments
fragments d'éléments d'interface< / td > < td > 3< / td > < / tr >
< tr > < td > E::before< / td > < td > le contenu généré avant un élément
E< / td > < td > Le pseudo-élément
::before < / td > < td > 2< / td > < / tr >
< tr > < td > E::after< / td > < td > le contenu généré après un
élément E< / td > < td > Le pseudo-élément
::after < / td > < td > 2< / td > < / tr >
< tr > < td > E.warning< / td > < td > < i > Uniquement en HTML< / i > . Identique à E[class~="warning"].< / td > < td > Sélecteurs de classe< / td > < td > 1< / td > < / tr >
< tr > < td > E#myid< / td > < td > un élément E dont l'ID est égal à
"myid".< / td > < td > Sélecteurs d'ID< / td > < td > 1< / td > < / tr >
< tr > < td > E:not(s)< / td > < td > un élément E qui n'est pas représenté
par le sélecteur simple s< / td > < td > La pseudo-classe de négation< / td > < td > 3< / td > < / tr >
< tr > < td > E F< / td > < td > un élément F qui est le descendant d'un
élément E< / td > < td > Combinateur de descendance
< / td > < td > 1< / td > < / tr >
< tr > < td > E > F< / td > < td > un élément F qui est le fils d'un élément
E< / td > < td > Combinateur filial< / td > < td > 2< / td > < / tr >
< tr > < td > E + F< / td > < td > un élément F immédiatement précédé
par un élément E< / td > < td > Combinateur d'adjacence
directe< / td > < td > 2< / td > < / tr >
< tr > < td > E ~ F< / td > < td > un élément F précédé
par un élément E< / td > < td > Combinateur d'adjacence
indirecte< / td > < td > 3< / td > < / tr >
< / tbody >
< / table >
< / article >
< p id = "pages" > < / p >
< aside >
< p > Dans cette page, avant l'action de FreeDatas2HTML, toutes les données sont affichées, sans proposer de pagination ni de filtre.< / p >
< p > C'est un cas d'usage possible de FreeDatas2HTML : vous avez listé des données dans une page via votre code backend (PHP, Python, node.js...). Vous souhaitez proposer à vos utilisateurs de passer de pages en pages, d'effectuer des recherches... tout cela sans avoir à appeler de nouveau votre backend. Le résultat est plus fluide et cela économise les ressources de votre serveur, tout se faisant dans le navigateur de l'utilisateur.< / p >
< p > Il est tout à fait possible de lister vos données autrement que dans un tableau, du moment qu'il reste possible de cibler séparément le nom des champs et la liste des enregistrements via des sélecteurs CSS. D'où le tableau ci-dessous, venant du < a href = "https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" target = "_blank" rel = "noopener" > W3C< / a > et dont le contenu pourra donc vous être utile :-)< / p >
< / aside >
< footer > < p > Design basé sur < a href = "https://www.getpapercss.com" target = "_blank" > PaperCSS< / a > < / p > < / footer >
< / body >
< / html >
