異なるテーブルを表示onClick

Question

私はいくつかのテーブルを持っています。これらのテーブルはすべてMySQL DBから動的に構築されています。私はテーブル間を切り替えることができるようにしたい、タブまたはボタンを使用するかどうかは関係ありません。ここで

は私のテーブルを構築するために私の関数である。ここでは

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

は私のHTMLです：

<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"> 

私はちょうどボタンが関数を呼び出すと、一つのテーブルを作るかもしれない期待していました表示し、他を隠すが、それは動作していないようです。これを行う最も簡単な方法は何ですか？

ありがとうございます！

Answer 1

を私は他の回答に似jQueryのを、使用して終了しますが、いくつかの違いがありました。もう一方のifステートメントは物事を放つように見えましたが、彼の答えは正しい方向に私を指摘しました。

ここは自分の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> 

そして私の最愛の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

jqueryを使用して、ボタンをクリックしてテーブルを非表示にすることができます。

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

あなたはここにこのような何かの作業例を参照することができます：あなたはまた、単にタブ内のテーブルを読み込むことができshow/hide example

を。

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

現在のタブの作業例を見ることができます：tabs example