时间戳

首页 > 解决方案 > 如何以编程方式创建输入/输出系统？

javascript - 如何以编程方式创建输入/输出系统？

问题描述

基本上，我想设计一个具有签入/签出功能的表格，用户可以在其中按下按钮并签入或签出，具体取决于他们之前的状态。我在 Visual Studios 中创建了 webform.aspx。

    <title> Check-in Board </title>
    <link href="StyleSheet.css" type="text/css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <img src="logo.png" class="center" />
    <form id="form1" runat="server">
        <%--<asp:Panel ID="toggleSwitch" runat="server">--%>
        <table id="board">
            <tr>
                <th> In </th>
                <th> Out </th>
            </tr>
            <tr id="row">
                <td>
                    firstName lastName <button type="button" class="myBtn" onclick="myFunction()"> Out </button>
                </td>

                <script>
                    function myFunction() {
                        var x = document.getElementById("myBtn");
                        //x.disabled = true;
                        alert("You have signed out.");
                        //remove cell with person name under in column
                        $("#board").on('click', '.myBtn', function () {
                            $(this).closest('td').remove();
                            //create new cell
                            var row = document.getElementById("row");
                            var x = row.insertCell(-1);
                            x.innerHTML = "firstName lastName";
                            //create new button in new cell
                            var btn = document.createElement("BUTTON");
                            btn.innerHTML = "In";
                            document.body.appendChild(btn);
                            //click button to move to In column
                            btn.onclick = function () {
                                alert("You have signed in.");
                                var row = document.getElementById("row");

                                var y = row.insertCell(0);
                                var z = row.deleteCell(-1);
                                y.innerHTML = "firstName lastName";

                            }
                        });

                    }
                    </script>
                <td>

                </td>

            </tr>
            <tr>
                <td>

                    </td>

                <td>

                </td>
            </tr>
        </table>
        <%--</asp:Panel>--%>
    </form>
</body>
</html>

如果这个人是“in”，那么“in”列会显示他们的名字和一个写着“out”的按钮，一旦按下，就会将他们移到“out”列，并带有一个新的按钮，上面写着“ in”，反之亦然。我想我的第一部分是正确的，名称显示在带有“out”按钮的“in”列中，单击时将它们切换到 out 列。当我尝试按下“out column”中的“in”按钮（将它们签入）时，就会出现问题；它将它们带回“in”列，但没有按钮。我需要做什么来解决这个问题？我需要有一个循环吗？

标签： javascripthtml.netwebforms

解决方案

推荐阅读