Print only one

by Simon Hi

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;
  }
}

JavaScript

(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"))
  }))
})();