Verschiedene Tabellen anzeigen onClick

Question

Ich habe ein paar verschiedene Tabellen, von denen alle dynamisch aus einer MySQL DB erstellt werden. Ich möchte in der Lage sein, zwischen den Tabellen zu wechseln, es ist egal, ob ich Tabs oder Schaltflächen verwende.

Hier ist meine Funktion meinem Tisch zu bauen:

<div id="wrap"> 

     <br /> 
     <br /> 
      <h3>User Maintenance | Pending User Requests</h3> 
     <h4 class="welcome"></h4> 
     <hr /> 
     <div class="colWrap"> 
      <input type="button" id="Submit" value="Submit" onclick="deny(); approve(); info();"> 
      <button class="tablinks" onclick="call some function">Pending Users</button> 
      <button class="tablinks" onclick="call some function">Awaiting Reply</button> 
     </div> 


    <input type="button" id="deny" value="Deny" onclick="deny()"> <input type="button" id="Approve" value="Approve" onclick="approve()"> <input type="button" id="info" value="More Information" onclick="info()"> --> 

      <br /> 
      <br /> 

      <div class="col1"> 
    <!-- <div id = "thead"></div> --> 
    <div id="usersTable" class="tabcontent"> 
    <div id="replyTable" class="tabcontent"> 

    </div> 
    </div> 
    </div> 
    </div> 
    <script type="text/javascript"> 

Ich hatte gehofft, habe ich konnte nur eine Taste eine Funktion aufrufen und einen Tisch machen:

function load_pending() { 


      $.post(
      "Returnsmedb.php", 
      function (response) { 

       var block = [] 

       index = 0; 
       for (var item in response){ 

        var objectItem = response[item]; 

        var firstname = objectItem.fname; 
        var lastname = objectItem.lname; 
        var username = objectItem.uname; 
        var email = objectItem.email; 
        var deny = document.createElement("input"); 
        deny.type = "checkbox"; 
        deny.className = "chk"; 
        deny.name = "deny"; 
        deny.id = "deny"; 
        var approve = document.createElement("input"); 
        approve.type = "checkbox"; 
        approve.className = "chk"; 
        approve.name = "approve"; 
        var moreinfo = document.createElement("input"); 
        moreinfo.type = "checkbox"; 
        moreinfo.className = "chk"; 
        moreinfo.name = "moreinfo"; 


        block.push(firstname); 
        block.push(lastname); 
        block.push(username); 
        block.push(email); 
        block.push(deny); 
        block.push(approve); 
        block.push(moreinfo); 

        dataset.push(block); 
        block = []; 


       } 


       var data = [" First Name", " Last Name "," User Name ", " Email "," Deny", "Approve", "More Information"] 

       tablearea = document.getElementById('usersTable'); 
       table = document.createElement('table'); 
       thead = document.createElement('thead'); 
       tr = document.createElement('tr'); 

       for (var i = 0; i < data.length; i++) { 
        var headerTxt = document.createTextNode(data[i]); 
        th = document.createElement('th'); 
        th.appendChild(headerTxt); 
        tr.appendChild(th); 
        thead.appendChild(tr); 
       } 

       table.appendChild(thead); 



       for (var i = 0; i < dataset.length; i++) { 
        tr = document.createElement('tr'); 
        tr.appendChild(document.createElement('td')); 
        tr.appendChild(document.createElement('td')); 
        tr.appendChild(document.createElement('td')); 
        tr.appendChild(document.createElement('td')); 
        tr.appendChild(document.createElement('td')); 
        tr.appendChild(document.createElement('td')); 
        tr.appendChild(document.createElement('td')); 


        tr.cells[0].appendChild(document.createTextNode(dataset[i][0])); 
        tr.cells[1].appendChild(document.createTextNode(dataset[i][1])); 
        tr.cells[2].appendChild(document.createTextNode(dataset[i][2])); 
        tr.cells[3].appendChild(document.createTextNode(dataset[i][3])); 
        // tr.cells[4].appendChild(document.createTextNode(dataset[i][4])); 
        tr.cells[4].appendChild((dataset[i][4])); // 
        tr.cells[5].appendChild((dataset[i][5])); // 
        tr.cells[6].appendChild((dataset[i][6])); // 
        table.appendChild(tr);     
       } 
       tablearea.appendChild(table); 


      }, 'json' 
     );   
} 

Hier mein HTML ist Anzeigen und dann das andere ausblenden, aber es scheint nicht zu funktionieren. Was ist der einfachste Weg, dies zu tun?

Vielen Dank im Voraus!

Answer 1

Ich landete mit JQuery, ähnlich wie die andere Antwort, aber es gab einige Unterschiede. Die if-Aussage in der anderen schien Dinge zu verwerfen, aber seine Antwort wies mich in die richtige Richtung.

Hier ist mein HTML.

<div class="colWrap"> 
      <input type="button" id="Submit" value="Submit" onclick="deny(); approve(); info();"> 
      <button id="p_users"></button> 
      <button id="msg_sent"></button> 
     </div> 

      <br /> 
      <br /> 

      <!-- <div class="col1"> --> 
      <div id="usersTable" ></div> 
      <div id="replyTable" style = "display: none;"> </div> 

    <!-- </div> --> 


    </div> 

Und mein geliebter JQuery.

$(function() { 
    $("#msg_sent").click(function() { 
     var table = document.getElementById("replyTable"); 
     $('#usersTable').hide('slow'); 
     $('#replyTable').show('slow'); 
     console.log(table); 
    }); 
}); 
$(function() { 
    $("#p_users").click(function() { 
     var table = document.getElementById("usersTable"); 
     $('#usersTable').show('slow'); 
     $('#replyTable').hide('slow'); 
     console.log(table); 
    }); 
}); 

Answer 2

Sie könnten einige jquery verwenden, um die Tabellen bei einem Klick auf die Schaltfläche auszublenden und anzuzeigen.

$(function() { 
     //Create a click function on whatever button you want to show and hide the tables with 
     $("#ShowHideTablesButton").click(function() { 
      var $Table1 = $("#Table1_ID"); 
      var $Table2 = $("#Table1_ID"); 

      //If table 1 is hidden, then show it and hide the other table or vise versa 
      if ($Table1.hasClass("hidden")) { 
       $Table1.show(); 
       $Table2.hide(); 
      } 
      else { 
       $Table2.show(); 
       $Table1.hide(); 
      } 
     }); 
    }); 

Sie können wie diese hier ein funktionierendes Beispiel für etwas sehen: show/hide example

Sie könnten auch die Tabellen innerhalb von Tabs bevölkern nur.

<div class="tab"> 
    <button class="tablinks" onclick="showHideTable(event, 'Table1')">table1</button> 
    <button class="tablinks" onclick="showHideTable(event, 'Table2')">table2</button> 
</div> 

<div id="Table1" class="tabcontent"> 
    <table> 
     <!--Content..--> 
    </table> 
</div> 

<div id="Table2" class="tabcontent"> 
    <table> 
     <!--Content..--> 
    </table> 
</div> 

Sie können ein funktionierendes Beispiel für Registerkarten hier: tabs example