Question

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserPermisson.aspx.cs"
    Inherits="TestProjects.UserPermisson" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function AddUsers() {
        debugger;
        var table = document.getElementById('tblUserList');

            var i = $('#tblUserList').length;

            var row = table.insertRow(i);
            var cellUsers = row.insertCell(0);
            var select = document.createElement("select");
            select.setAttribute("name", "ddlUsers" + i);
            select.setAttribute("id", "ddlUsers" + i);
            //   select.onchange = bindUsers;

            option = document.createElement("option");
            option.setAttribute("value", 0);
            option.innerHTML = "John";
            select.appendChild(option);

            option = document.createElement("option");
            option.setAttribute("value", 1);
            option.innerHTML = "Peter";
            select.appendChild(option);

            option = document.createElement("option");
            option.setAttribute("value", 2);
            option.innerHTML = "Roger";
            select.appendChild(option);
            cellUsers.appendChild(select);


        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tblUserList">
            <tr>
                <td>
                    User
                </td>
                <td>
                    Permission Type
                </td>
                <td>
                    Allow View
                </td>
            </tr>
            <tr>
                <td>
                    <select id="ddlUsers0">
                        <option value="" disabled="disabled" selected="selected">John</option>
                        <option value="1">Peter</option>
                        <option value="2">Roger</option>
                    </select>
                </td>
                <td>
                    <input type="checkbox" name="Grant" value="Grant" id="Grant0" />Grant
                    <input type="checkbox" name="Revoke" value="Revoke0" id="Revoke0"/>Revoke
                </td>
                <td>
                    <input type='radio' name='choices' value='0' id="ViewYes0" />Yes 
                    <input type='radio' name='choices' value='ViewNo0' />No
                </td>
            </tr>
            <tr></tr>
        </table>
        <table>
        <tr>
         <td colspan="4" >
         <asp:Button ID="btnAddUsers" runat="server" Text="Add More Users" OnClientClick="AddUsers()" />
         </td>
        </tr>
        </table>
    </div>
    </form>
</body>
</html>

在上面的代码中我使用javascript向表添加一行，但是当我点击添加更多用户按钮时，行显示片刻然后消失。有人请指导我一下我做错了吗？

Answer 1

因为您的按钮具有属性runat=server

<asp:Button ID="btnAddUsers" runat="server" Text="Add More Users" OnClientClick="AddUsers()" />

当你点击它时，它会创建一个回发，我会再次重新加载整个脚本。

如果您没有该按钮的任何服务器端事件，只需将asp button替换为input type="button"

<input type="button" id="btnAddUSers" value="Add More USers" onclick="AddUsers()"/>

使用Javascript添加行但它显示然后变得不可见

1 个答案: