Affichage de tableaux

Bonjour,

J'espère poster au bon endroit sinon je m'excuse je débute en programmation. J'ai donc un fichier template_personnel.php ainsi qu'un fichier template_personnel.html. Dans le fichier html on trouve un bouton "Afficher" qui nous affiche à l'écran la liste du personnel ainsi qu'un bouton rechercher qui nous ouvre une modale dans laquelle il faut renseigner le nom d'utilisateur.
Une fois la modale valider je souhaiterais que la recherche s'affiche à la place du tableau actuel ou il y a tout le personnel. Actuellement les deux tableaux s'affichent à la suite.
J'ai vu que je pouvais utiliser ce genre de script qui modifie le CSS cependant soit ça ne fonctionne pas, soit je dois le mettre au mavais endroit.

<script>
      document.querySelector(".afficher").onclick = function () {
        if (
          window.getComputedStyle(document.querySelector(".table")).display ==
          "none"
        ) {
          document.querySelector(".table").style.display = "block";
        } else {
          document.querySelector(".table").style.display = "none";
        }
      };
</script>

Merci d'avance pour votre aide !