[Résolu] Imprimer plusieurs tableaux html séparément les uns des autre

Bonjour

dans une page html à la suite de requête je crée plusieurs tableaux .
Je voudrai imprimer chaque tableau séparément.
un bouton window.print() affiche tous les tableaux les uns en dessous des autres

Merci pour vos idées

Bonjour,

On ne comprend pas bien la question, et ça manque un peu de contexte. As-t-on le droit à js ? Peut-on rajouter du html ? Comment souhaite-t-on déclencher l'impression ?

1) S'il y a un bouton "Imprimer" pour chaque tableau, on peut très bien, lorsqu'on appuye sur ce bouton, ajouter avec du js une classe au tableau, et utiliser les @media print dans le css pour n'imprimer que les éléments ayant cette classe.

2) Selon comment est faite la page, on peut alternativement espérer une solution basée sur des inputs (précédant chaque tableau) qui lorsqu'ils sont cochés font que le tableau correspondant est imprimé. techniquement, ça se fait là-aussi en utilisant dans le css un @media print et en y spécifiant que seuls les tableaux suivants immédiatement un <input> coché peuvent être imprimées.

Il y a surement plein d'autres possibilités.

Amicalement,

Bonsoir merci pour tes réponses

oui js et html supplémentaire sont possibles.
une requête sort une liste d'activité
à chaque activité une autre requête sort la liste des adhérents rangés dans un tableau.
à la fin j'ai 17 tableaux d'activités différentes avec leurs adhérents.
j'ai mis un bouton imprimer à la fin de chaque tableau.
chaque tableau à id différent je ne vois pas comment créer média print différent dépendant de l'id?
j'ai trouvé une solution (peut être pas très cline) qui fonctionne et me va assez bien, voir le code ci-dessous. Mais qui m'oblige à mettre le lien du CSS dans la div sinon mon tableau n'est pas quadrillé

function printDiv(divName) {//divName étant la div du tableau
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
}

je mets résolu mais tu peux me répondre
encore merci

Bonjour,

Tu devrais ne changer que la classe du tableau correspondant au bouton qui a été cliqué.

Exemple : https://jsfiddle.net/parsimonhi/2cxr41o3/

html:

<table>
  <tr>
    <td>Rouge</td>
    <td>Vert</td>
    <td>Bleu</td>
  </tr>
</table>
<button class="printBtn">Imprimer</button>
<table>
  <tr>
    <td>Noir</td>
    <td>Blanc</td>
  </tr>
</table>
<button class="printBtn">Imprimer</button>

css:

@media print {
  body>* {
    display: none;
  }

  table.toPrint {
    display: block;
  }
}

js:

(function() {
  let btns = document.querySelectorAll(".printBtn");
  btns.forEach(b => b.addEventListener("click", function(event) {
    event.target.previousElementSibling.classList.add("toPrint");
    window.print();
    event.target.previousElementSibling.classList.remove(("toPrint"))
  }))
})();

Amicalement,
Modifié par parsimonhi (29 Jan 2022 - 13:14)

Bonjour

J'ai testé mais ça ne fonctionne pas ( j'ai bien vu que sur ton site de test ça fonctionne)

La fonction() comment est elle appelée? moi j'ai copié cette fonction dans mon fichier js.
Je n'utilise que javascript! je ne sais pas ce que c'est purejs

Bonjour,

Purejs, ça veut dire "javascript pur", ou encore "javascript n'ayant besoin de rien d'autre pour fonctionner" (pas besoin de librairies additionnelles comme jquery).

Il faut mettre le code de la fonction juste avant la balise </body>, et on suppose que tous les éléments de la page sont déjà chargés à ce moment là.

Si ce n'est pas le cas, tout dépend de la manière dont on construit la page. il faudrait plus de détails si c'est le cas.

Les boutons ici sont supposés avoir la classe "printBtn" (on peut faire autrement, mais il faut modifier le code), et doivent être successeurs immédiats des tableaux dans le html (on peut faire autrement, mais il faut modifier le code).

La fonction se charge elle-même d'ajouter le code approprié à chaque bouton.

Exemple de code complet :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media print {
  body>* {
    display: none;
  }

  table.toPrint {
    display: block;
  }
}
</style>
</head>
<body>
<table>
<tr><td>Bleu</td><td>Blanc</td><td>Rouge</td></tr>
</table>
<button class="printBtn">Imprimer</button>
<table>
<tr><td>Rouge</td><td>Vert</td><td>Bleu</td></tr>
</table>
<button class="printBtn">Imprimer</button>
<script>
(function() {
  let btns = document.querySelectorAll(".printBtn");
  btns.forEach(b => b.addEventListener("click", function(event) {
    event.target.previousElementSibling.classList.add("toPrint");
    window.print();
    event.target.previousElementSibling.classList.remove(("toPrint"))
  }))
})();
</script>
</body>
</html>

Amicalement,