用Java脚本创建行，但它走了我的ASP面板 [英] Create row with java script but its gone on my asp panel

问题描述

我有ASP面板来显示用户的一些登记表详细填写表格，当我与我的脚本，它去了哪里，当我试图隐藏我的面板上，产生的表行，当我的意思是，和用户填写文本框生成排点击下一步按钮时，当前面板设置可见假，新的面板可见设置为true我生成的表行了。

I have asp panel to show some register form detail for user to complete the form , when i generate row with my script , its gone when i try to hide my panel , i mean when table row generated , and user fill the textbox when click the next button , the current panel set visible to false and new panel visible set true and my generated table row is gone .

我的剧本

<SCRIPT language="javascript">
    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var row = table.insertRow();

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        cell1.appendChild(element1);

        var cell3 = row.insertCell(1);
        var element2 = document.createElement("input");
        cell3.appendChild(element2);

        var cell4 = row.insertCell(2);
        var element3 = document.createElement("input");
        cell4.appendChild(element3);

        var cell5 = row.insertCell(3);
        var element4 = document.createElement("input");
        cell5.appendChild(element4);

        var cell6 = row.insertCell(4);
        var element5 = document.createElement("input");
        cell6.appendChild(element5);
    }
</SCRIPT>

我的ASP面板：

My asp panel :

    <asp:Panel ID="PanelProfile" runat="server">
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable">
    <caption>
        <asp:Label ID="Label1" runat="server" Font-Size="Small" ForeColor="Red"></asp:Label>
    </caption>
    <tr>
        <td>
            <asp:TextBox ID="TextBoxFam_name" runat="server"></asp:TextBox><br />
        </td>
        <td>
            <asp:TextBox ID="TextBoxFam_relation" runat="server"></asp:TextBox><br />
        </td>
        <td>
            <asp:TextBox ID="TextBoxFam_age" runat="server"></asp:TextBox><br />
        </td>
        <td>
            <asp:TextBox ID="TextBoxFam_education" runat="server"></asp:TextBox><br />
        </td>
        <td>
            <asp:TextBox ID="TextBoxFam_statuse" runat="server"></asp:TextBox><br />
        </td>
    </tr>
<asp:Button ID="ButtonNext" runat="server" Text="Next Panel" />
</table>
</asp:Panel>

编辑：没有人能帮助我。

Edit : Nobody can help me ?

推荐答案

这个问题是因为你误解了ASP.NET生命周期。当你有一个回发到服务器（例如，单击ButtonNext后），你所做的任何客户端的变化将消失，页面从服务器再生，发送到客户端。

This problem arises because you've misunderstood the ASP.NET life cycle. When you have a postback to the server (for example, after clicking ButtonNext), any client side changes that you've made will disappear, and the page is regenerated from the server and sent to the client.

有几种方法来解决这个问题：

There's several ways to get around this:

1. 您可以使用服务器端code以添加新行。这是最有效的，但最简单的方法。

1. You can use server side code to add new rows. This is the least efficient but easiest method.

您可以通过阅读提交的表单值增加多少行的服务器上检测以及他们的值分别为，然后重新创建它们的服务器上，并把他们送回作为响应的一部分。

You can detect on the server by reading the posted form values how many rows were added and what their values were, then recreate them on the server and send them back as part of the response.

您可以消除的回传，并使用客户端的JavaScript做的显示/面板的隐藏。我喜欢这种风格最好的，因为它是最有效地利用资源，你没有客户端和服务器端试图操纵DOM。

You can eliminate postbacks and use client side JavaScript to do showing/hiding of the panel. I like this style best because it's the most efficient use of resources, and you don't have both client and server side trying to manipulate the DOM.

这篇关于用Java脚本创建行，但它走了我的ASP面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！