首先我用Jquery动态生成了一个text控件。
其次,我需要点击后台按钮的时候获取text中的值。
以下是生成控件实例代码。需要点击获取的时候将所有text中的数据收集到数组中。
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="js/jquery-1.7.2.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function () { //<tr/>居中 $("#tab tr").attr("align", "center"); //增加<tr/> $("#but").click(function () { var _len = $("#tab tr").length; $("#tab").append("<tr id=" + _len + " align='center'>" + "<td>" + _len + "</td>" + "<td>Dynamic TR" + _len + "</td>" + "<td><input type='text' name='desc" + _len + "' id='desc" + _len + "' /></td>" + "<td><a href=\'#\' onclick=\'deltr(" + _len + ")\'>删除</a></td>" + "</tr>"); }) }) //删除<tr/> var deltr = function (index) { var _len = $("#tab tr").length; $("tr[id='" + index + "']").remove(); //删除当前行 for (var i = index + 1, j = _len; i < j; i++) { var nextTxtVal = $("#desc" + i).val(); $("tr[id=\'" + i + "\']") .replaceWith("<tr id=" + (i - 1) + " align='center'>" + "<td>" + (i - 1) + "</td>" + "<td>Dynamic TR" + (i - 1) + "</td>" + "<td><input type='text' name='desc" + (i - 1) + "' value='" + nextTxtVal + "' id='desc" + (i - 1) + "'/></td>" + "<td><a href=\'#\' onclick=\'deltr(" + (i - 1) + ")\'>删除</a></td>" + "</tr>"); } } </script> </head> <body> <form id="form1" runat="server"> <table id="tab" border="1" width="60%" align="center" style="margin-top:20px"> <tr> <td width="20%">序号</td> <td>标题</td> <td>描述</td> <td>操作</td> </tr> </table> <div style="border:2px; border-color:#00CC00; margin-left:20%; margin-top:20px"> <input type="button" id="but" value="增加"/> <asp:Button ID="提交" runat="server" Text="提交" /> </div> </form> </body> </html>
不考虑前台和ajax,最简单的方式就是为input[type='text']设置一个name属性,然后在后台就可以通过
string[] values=Request.Form.GetValues("t");。这个写法能够防止输入框中有小写逗号导致分割错误的问题!
1.可以给input标签设置class值,动态生成的所有的Input标签都具有同一个class,然后通过jquery的$(".className")获取所有的input的集合,遍历集合,获取每个input的值。
2.找到所有input的父容器,比如你给的例子,$("#tab").find("input"),获取所有input的集合,遍历集合,取每个input的值。
$("#tab").find("input").each(function(){
//对每一个input进行处理
});
楼主是想点击服务端控件,后台代码获取动态生成的input的值吧?
最直接的做法:为你生成的input[type=text]加一个name,比如<input type="text" name="t" />
后台代码,按钮的事件可以这样写:
protected void Button1_Click(object sender, EventArgs e) { if (!object.Equals(Request["t"], null)) { string [] values = Request["t"].ToString().Split(new char[]{','},StringSplitOptions.RemoveEmptyEntries); //values这个数组就是所有name=t的input值的集合,可以对它 do something ... } }
----------------------------------------------------------------------------------
如果是界面上获取,不用服务器控件按钮去submit,那就用楼上说的jquery筛选器一下就拿到了,然后ajax将数据传给后台方法也行~
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//<tr/>居中
$("#tab tr").attr("align", "center");
//增加<tr/>
$("#but").click(function() {
var _len = $("#tab tr").length;
$("#tab").append("<tr id=" + _len + " align='center'>"
+ "<td>" + _len + "</td>"
+ "<td>Dynamic TR" + _len + "</td>"
+ "<td><input type='text' name='desc" + _len + "' id='desc" + _len + "' /></td>"
+ "<td><a href=\'#\' onclick=\'deltr(" + _len + ")\'>删除</a></td>"
+ "</tr>");
})
});
//删除<tr/>
var deltr = function (index) {
var _len = $("#tab tr").length;
$("tr[id='" + index + "']").remove(); //删除当前行
for (var i = index + 1, j = _len; i < j; i++) {
var nextTxtVal = $("#desc" + i).val();
$("tr[id=\'" + i + "\']")
.replaceWith("<tr id=" + (i - 1) + " align='center'>"
+ "<td>" + (i - 1) + "</td>"
+ "<td>Dynamic TR" + (i - 1) + "</td>"
+ "<td><input type='text' name='desc" + (i - 1) + "' value='" + nextTxtVal + "' id='desc" + (i - 1) + "'/></td>"
+ "<td><a href=\'#\' onclick=\'deltr(" + (i - 1) + ")\'>删除</a></td>"
+ "</tr>");
}
}
//提交 获取文本框的值
function check() {
var m = "";
$("#tab input").each(function(i) {
m += $("#desc" + (i + 1)).val()+"!";
});
$("#hidvalue").val(m);
//把获取的值复制个服务器控件,这样后台就可以接受了
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField runat="server" id="hidvalue"/>
<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
<tr>
<td width="20%">序号</td>
<td>标题</td>
<td>描述</td>
<td>操作</td>
</tr>
</table>
<div style="border:2px;
border-color:#00CC00;
margin-left:20%;
margin-top:20px">
<input type="button" id="but" value="增加"/>
<asp:Button ID="提交" runat="server" OnClientClick="check()" Text="提交" />
</div>
</form>
</body>
</html>
//亲。希望对你有帮助。我测试了没有问题