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隐藏并在按钮单击时显示表格。

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

Answer 2

我最终使用JQuery，类似于其他答案，但存在一些差异。另一方的if语句似乎是在抛弃，但他的回答指出了我正确的方向。

这是我的HTML。

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

我亲爱的JQuery。

$scope.$broadcast

在onClick上显示不同的表

2 个答案: