在ASP.NET中检索动态创建的表的单元格值

时间:2012-01-02 02:17:06

标签: jquery asp.net html-table

我通过javascript向动态创建的表添加行,我希望在回发时获取其值。

这是表格:

<table id="summ" width="350px" border="1" >

添加行的Javascript代码段:

 $('#summ > tbody:last').append('<tr><td><input type="button" id="delete" value="Delete"></td><td>' + sup + '</td><td>' + qty + '</td><td><input type="text"></td></tr>');

如何在单击按钮后获取附加到表格的单元格的值? “summ”无法识别,因为如果我将runat=server放在表标记上,则Javascript不起作用。

2 个答案:

答案 0 :(得分:2)

服务器不知道你正在捣乱DOM。 您可以使用HiddenFields发回值:

var sup = "test";
var qty = 123;

$('#summ > tbody:last').append('<tr><td><input type="button" id="delete" value="Delete"></td><td>' + sup + '</td><td>' + qty + '</td><td><input type="text"></td></tr>');
$('#HiddenField_sup').val(sup);
$('#HiddenField_qty').val(qty);      

在服务器上:

Response.Write(HiddenField_qty.Value);
Response.Write(HiddenField_sup.Value);

答案 1 :(得分:2)

您可以在代码后面定义AJAX(WebMethod)方法(添加System.Web.Services的引用)并使用$ .ajax或$ .post来请求它。看看我发布的代码片段供您参考。

Sample.aspx(代码内联)

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    [WebMethod]
    public static string SendData(string sup,string qty)
    {
        return "OK : " + sup + " " + qty;
    } 
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Sample Page</title>
    <script src="../script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var sup1 = 10; 
            var qty1 = 20;
            $("#btn1").click(function () {
                var arg = '{sup: ' + sup1 + ',qty:' + qty1 + '}';
                $.ajax({
                    type: "POST",
                    url: "Sample.aspx/SendData",
                    data: arg,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (msg) {
                        alert(msg.d);
                    },
                    error: function (msg) {
                        alert("Error: " + msg);
                    }

                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <input type="button" id="btn1" value="Save" />
    </div>
    </form>
</body>
</html>

如果要使用“runat”属性,则在其中添加一个空并编写ClientID属性。

<table  runat="server"  id="summ" width="350px" border="1" >
 <tbody>
   <tr></tr>
 </tbody>
</table>

jQuery代码

$("#<%=summ.ClientID%> > tbody:last").append('<tr><td><input type="button" id="delete" value="Delete"></td><td>' + sup1 + '</td><td>' + qty1 + '</td><td><input type="text"></td></tr>');

OR