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

时间:2013-09-30 00:04:42

标签: javascript c# asp.net html-table

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

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

我的问题是,我无法在服务器端(在.aspx.cs文件中)检索表的值,因为我的表不是runat="server",如果我的表{{1} },我无法在客户端添加行。

有任何想法可以解决这个问题,或者有另一种方法可以解决这个问题吗?

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

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')"

1 个答案:

答案 0 :(得分:2)

我不确定为什么你认为如果你将其标记为runat =“server”而无法操纵客户端的信息,那么你的意思是在此之后ID被更改了吗?

你可以通过添加ClientIDMode =“Static”或在你的javascript中将id标记为静态,而不是引用Id,你引用ClientId

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

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

您还可以使用其他API来公开所有信息,并使您能够重新加载信息(如果将来需要)。

您可以在这方面获得更好的UI体验,但如果您不熟悉Ajax和Web服务设计,则需要更多时间。