отображать данные в формате таблицы, когда я нажимаю кнопку

Question

Я хочу отобразить мои данные в табличном формате.

Данные отображаются в веб-страницы, но я хочу, чтобы отобразить данные, когда я нажимаю кнопку (просмотр пользователя). Я много пробовал, но не могу заставить его работать. Когда я нажимаю кнопку (просмотр пользователя), данные отображаются на странице. Может ли кто-нибудь помочь мне?

код скрипта:

    <form method="post" action="">
      <h3 class="alert alert-info" align="center">WELCOME TO ADMIN HOME PAGE</h3>
      <div class="container">
        <button class="btn btn-info" name="button" id="user">View USER</button>
        <br />
        <div class="table-resposive" id="user_data">
        </div>  
      </div>
    </form>
  </body>
</html>

<script>
  $(document).ready(function(){  

  load_data();

  function load_data()
  {
    $.ajax({
      url:"fetch.php",
      method:"POST",
      success:function(data)
      {
        $('#user_data').html(data);
      }
    });
  }  
</script>

Answer 1

Дайте вашей форме идентификатор

, т. Е.

, затем создайте java-скрипт, который будет скрывать эту форму по щелчку и отображать данные одним и тем же щелчком.

        $(".btn1").click(function(){
        $("#name_of_the_form").hide();
        $("#addinst").hide();

Answer 2

Для вызова функции при нажатии кнопки вы можете использовать это:

$("#user").click( function()
{
    $.ajax({
      url:"fetch.php",
      method:"POST",
      success:function(data)
      {
        $('#user_data').html(data);
      }
    });
});

или просто так:

$("#user").click(load_data);

Answer 3

Попробуйте это ...

<script>

$(document).on("click","#user",function(){
    load_data();
});

  function load_data()
  {
    $.ajax({
      url:"fetch.php",
      method:"POST",
      success:function(data)
      {
        $('#user_data').html(data);
      }
    });
  }  

<script>