如何从在客户端添加行的表中获取数据

本文关键字：获取 数据 添加行 客户端 | 更新日期: 2023-09-27 18:33:12

我有一个包含 2 列的表格。并有一个按钮"添加行"，允许用户动态添加带有 2 个文本框的新行（通过使用 jJvascript 以提高性能而无需回发到服务器）。

我希望检索用户键入的所有值并保存到数据库。

我的问题是，我无法在服务器端（.aspx.cs文件中）检索表的值，因为我的表没有runat="server"，如果我的表runat="server"，我无法在客户端添加行。

有什么想法可以解决这个问题或有其他替代方法吗？

以下是我的"添加行"代码：

function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        if (rowCount > 10) {
            alert("Only 10 rows allow");
            return false;
        }  
        var cell1 = row.insertCell(0);
        cell1.innerHTML = rowCount;
        var cell2 = row.insertCell(1);
        var element1 = document.createElement("input");
        element1.type = "text";
        element1.name = "txtbox[]";
        element1.style = "width:345px;"
        cell2.appendChild(element1);
        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txtbox[]";
        element2.style = "width:345px;"
        cell3.appendChild(element2);
    }

这是表的代码

<table id="tblAddNode" width="750px" border="1">
            <tr>
                <th width="10px">No.</th>
                <th width="350px">Description</th>
                <th width="350px"> Keyword </th>
             </tr>
             <tr>
                <td width="10px">1</td>
                <td width="350px"> <input type="text" style="width:345px;"/> </td>
                <td width="350px"> <input type="text" style="width:345px;"/> </td>
             </tr>
        </table>

编辑"添加行"按钮

input type="button" value="Add Row" onclientclick="addRow('tblAddNode')"

"提交"按钮

<asp:Button ID="EnterRootNodeButton" runat="server" Text="OK" OnClick="EnterRootNode_Click"/>

如何从在客户端添加行的表中获取数据

我不确定为什么你认为如果你把它标记为runat="server"，你不能在客户端操纵信息，你的意思是在那之后ID被更改了吗？

您可以通过添加 ClientIDMode="Static" 或在 javascript 中将 id 标记为静态，而不是引用 Id，而是引用 ClientId

此外，有多种方法可以做到这一点，这取决于您的解决方案的设计方式以及您希望在问题上花费的时间。

您可以使用用户输入信息发出 ajax 的调用，然后将其发布到 API（您需要开发它）。您将保存用户添加的所有信息。

您还可以使用另一个 API 来公开所有信息，并使您能够重新加载信息（如果将来需要）。

这样做

你会有更好的UI体验，但当然，如果你不熟悉Ajax和Web服务设计，它需要更多的时间。

相关文章：