动态添加行-Jquery

Jquery实现动态添加行。前台添加,后台取值

脚本

<script type="text/javascript">

function RemarksAppend() {

var i = 6;
var textname = "textname";
var appendvalue = "<div><input type='text' name=" + textname + " style='width:600px' class='texvalue' /><input class='del-text' type='button' value='Delete'/></div>";

var ma = $('#main').append;
ma = $('#main').append(appendvalue);
$('#<%=hfRemarks.ClientID %>').val($('#main').html());
}
$(function () {
$('.del-text').live('click', function () {
$(this).parent().remove();
});
});
function getRemarkValue() {
var result = "";
$("input[name='textname']").each(function () {
result = result + encodeURI($(this).val()) + "|";
});
$('#<%=HFRemarksResult.ClientID %>').val(result);
}
</script>

前台页面

<div>
<div id="main">
<div>
<input type="text" name="textname" class="texvalue" id="1" style="width: 600px" value="" /><input
class="del-text" type="button" value="Delete" /></div>
</div>
<input id="addTextImput" type="button" value="Add Remarks" onclick="RemarksAppend();" />
<asp:HiddenField ID="hfRemarks" runat="server" />
<asp:HiddenField ID="HFRemarksResult" runat="server" />
<asp:Button ID="btnShow" OnClientClick="getRemarkValue();" runat="server" Text="Button"
onclick="btnShow_Click" />
</div>

后台

protected void btnShow_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(HFRemarksResult.Value))
{
string[] hfRemarksResult = HFRemarksResult.Value.TrimEnd('|').Split('|');
if (hfRemarksResult.Length > 0)
{
int no = 1;
string Remark = string.Empty;
foreach (string a in hfRemarksResult)
{
Remark += Server.UrlDecode(a);
no++;
}

btnShow.Text = Remark;
}
}
}

posted @ 2011-12-15 09:58  cn_king  阅读(4596)  评论(1编辑  收藏  举报