Question

我这里有这个表可以添加和删除行。这完全没问题。

<asp:Table ID="SiteInfo" runat="server" Style="border-style: solid">
    <asp:TableRow>
        <asp:TableCell Style="border-style: solid">
            <asp:Label runat="server" Text="Name of Site">
            </asp:Label>
        </asp:TableCell>
        <asp:TableCell Style="border-style: solid">
            <asp:Label runat="server" Text="Territory">
            </asp:Label>
        </asp:TableCell>
    </asp:TableRow>

    <asp:TableRow>
        <asp:TableCell>
            <asp:TextBox ID="Site1" runat="server" Style="border-style: solid"></asp:TextBox>
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="Territory1" runat="server" Style="border-style: solid"></asp:TextBox>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>
<br />
<asp:Button ID="addSite" runat="server" Text="Add a Site" OnClientClick="javascript:addRow();"></asp:Button>
<asp:Button ID="removeSite" runat="server" Text="Remove" OnClientClick="javascript:removeRow();"></asp:Button>
<!-- Add a row from the site table -->
<script type="text/javascript" language="javascript">
    function addRow() {
        var table = document.getElementById('<%=SiteInfo.ClientID%>');
        var row = table.insertRow(table.rows.length);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell1.innerHTML = '<input type="text" id="Site_' + table.rows.length + ' " Style="border-style: solid" />';
        cell2.innerHTML = '<input type="text" id="Territory_' + table.rows.length + ' " Style="border-style: solid" />';

    }
</script>
<!-- Remove a row from the site table -->
<script type="text/javascript" language="javascript" id="`">
    function removeRow() {
        var table = document.getElementById('<%=SiteInfo.ClientID%>');
        if (table.rows.length - 1 > 1)
            table.deleteRow(table.rows.length - 1);
    }
</script>

问题是我有一个提交按钮，需要能够读取和发送此信息，但我不知道如何从添加到表中的新行获取输入。这是我正在尝试做的，但它不起作用。

protected void submit_Click(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    if (Consent.Checked)
    {
        sb.Append("Site Name: " + Site1.Text + " | Territory : " + Territory1.Text + "\n");
        if (SiteInfo.Rows.Count > 2)
        {
            for (int i = 2; i < SiteInfo.Rows.Count; i++)
            {
                sb.Append("Site Name: " + SiteInfo.Rows[i].Cells[0].Text + " Territory : " + SiteInfo.Rows[i].Cells[1].Text + "\n");
            }
        }
}

Answer 1

为了理解这一点，我建议你理解asp.net page life cycle。

<强> 背景
您正在使用JavaScript在客户端的表中添加行。当您调用addRow（）/ removeRow（）函数时，浏览器（DOM maniuplation）会创建/删除新行。请注意，此更改在客户端进行当您点击“提交”时按钮你回发＆＃39;您的网页是一个请求，由浏览器发送到服务器，页面从头开始加载，然后执行submit_Click函数。此时，您在客户端的表上所做的更改不可用，因此您不会找到新创建/删除的行。您只能在aspx页面上找到已声明的内容。

<强> 解决方案

创建一个隐藏字段，如：

<input type="hidden" id="tab_content" name="tab_content" />

在您提交的＆＃39;的clientClick事件上按钮调用此功能：

   function SaveTableData() {

                     var content = document.getElementById("tableClientID").innerHTML;

                     document.getElementById("tab_content").value = content;
                 };

最后在submit_Click事件中读取此隐藏字段值。

Element.innerHTML属性设置或获取描述元素后代的HTML语法

// HTML:
// <div id="d"><p>Content</p>
// <p>Further Elaborated</p>
// </div>

const d = document.getElementById("d");
console.log(d.innerHTML);

// the string "<p>Content</p><p>Further Elaborated</p>"
// is dumped to the console window

希望这有帮助！

ASP.Net从表中动态创建的行中获取信息

1 个答案: