js动态添加行hiddenfield保存xml或json 数据 提交给后台处理

<style type="text/css">

table {

border: black solid 1px;

border-collapse: collapse;

}

td {

border: black solid 1px;

padding: 3px;

}

.td_Num {

width: 60px;

text-align: center;

}

.td_Item {

width: 160px;

text-align: center;

}

.td_Oper {

width: 120px;

text-align: center;

}

.td_Oper span {

cursor: pointer;

}

</style>

<div>

<table id="content">

<thead>

<tr>

<td colspan="5">本次会议决议</td>

<td colspan="5" style="text-align: right">

<a href="#" onclick="add_line();">添加</a>

</td>

</tr>

<tr>

<td class='td_Num'>

<asp:Label ID="lblNum" runat="server" Text="序号" Style="width: 60px"></asp:Label>

</td>

<td class='td_Item'>

<asp:Label ID="lblTitle" runat="server" Text="决议事项" Style="width: 120px"></asp:Label>

</td>

<td class='td_Item'>

<asp:Label ID="lblDescription" runat="server" Text="决议描述" Style="width: 120px"></asp:Label>

</td>

<td class='td_Item'>

<asp:Label ID="lblTarget" runat="server" Text="验证目标" Style="width: 120px"></asp:Label>

</td>

<td class='td_Item'>

<asp:Label ID="lblStandard" runat="server" Text="验证标准" Style="width: 120px"></asp:Label>

</td>

<td class='td_Item'>

<asp:Label ID="lblRecipient" runat="server" Text="责任人" Style="width: 120px"></asp:Label>

</td>

<td class='td_Item'>

<asp:Label ID="lblStartDdate" runat="server" Text="开始时间" Style="width: 120px"></asp:Label>

</td>

<td class='td_Item'>

<asp:Label ID="lblEndDate" runat="server" Text="完成时间" Style="width: 120px"></asp:Label>

</td>

<td class='td_Item'>

<asp:Label ID="lblIsWork" runat="server" Text="任务系统" Style="width: 60px"></asp:Label>

</td>

<td class='td_Oper'>

<asp:Label ID="lblOper" runat="server" Text="操作" Style="width: 60px"></asp:Label>

</td>

</tr>

</thead>

<tbody>

<tr style="display: none">

<td class="td_Num"></td>

<td class="td_Item">

<input type="text" class="Title" value="" /></td>

<td class="td_Item">

<input type="text" class="Description" value="" /></td>

<td class="td_Item">

<input type="text" class="Target" value="" /></td>

<td class="td_Item">

<input type="text" class="Standard" value="" /></td>

<td class="td_Item">

<uc1:PeopleEditorControls ID="PeopleEditorControls1" runat="server" MultiSelect="true" />

</td>

<td class="td_Item">

<input type="text" class="Wdate" value="" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })"></input></td>

<td class="td_Item">

<input type="text" class="Wdate" value="" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })"></input></td>

<td class="td_Item">

<input type="text" class="IsWork" value="" /></td>

<td class="td_Oper">

<span onclick="remove_line(this);">删除</span>

</td>

</tr>

<asp:Repeater ID="Repeater1" runat="server">

<ItemTemplate>

<tr>

<td class="td_Num"><%=count++ %></td>

<td class="td_Item">

<input type="text" class="Title" value="" /></td>

<td class="td_Item">

<input type="text" class="Description" value="" /></td>

<td class="td_Item">

<input type="text" class="Target" value="" /></td>

<td class="td_Item">

<input type="text" class="Standard" value="" /></td>

<td class="td_Item">

<uc1:PeopleEditorControls ID="PeopleEditorControls1" runat="server" MultiSelect="true" />

</td>

<td class="td_Item">

<input type="text" class="Wdate" value="" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })"></input></td>

<td class="td_Item">

<input type="text" class="Wdate" value="" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })"></input></td>

<td class="td_Item">

<input type="text" class="IsWork" value="" /></td>

<td class="td_Oper">

<span onclick="remove_line(this);">删除</span>

</td>

</tr>

</ItemTemplate>

</asp:Repeater>

</tbody>

</table>

<input type="button" value="提交数据" id="btnSubmit" onclick="SaveData()" />

<div style="display: none;">

<asp:HiddenField ID="HddfDate" runat="server" />

<asp:Button ID="BtnSaveDate" runat="server" Text="Button" OnClick="btnSubmit_Click" />

</div>

</div>

<script type="text/javascript">

var currentStep = 0;

var max_line_num = 0;

//增加一行记录 此方式为复制某行然后添加，包括行内控件值，使用时注意设置一个模板行

function add_line() {

var oTr = document.getElementById("content").rows[2];//此table复制第三行

var newTr = oTr.cloneNode(true);

newTr.style.display = "inline";

document.getElementById("content").getElementsByTagName("tbody")[0].appendChild(newTr);

newTr.firstChild.innerHTML = newTr.rowIndex - 2;

}

//删除选择记录

function remove_line(index) {

if (index != null) {

currentStep = $(index).parent().parent().find("td:first-child").html();

}

if (currentStep == 0) {

alert('请选择一项!');

return false;

}

if (confirm("确定要删除改记录吗？")) {

$("#content tr").each(function () {

var seq = parseInt($(this).children("td").html());

if (seq == currentStep) { $(this).remove(); }

if (seq > currentStep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); }

});

}

}

//保存数据

function SaveData() {

var data = "<root>";

$('#content tr').each(function () {

data += "<item>";

var Title = $(this).find("td:eq(1)").find("input").val();

var Description = $(this).find("td:eq(2)").find("input").val();

var Target = $(this).find("td:eq(3)").find("input").val();

var Standard = $(this).find("td:eq(4)").find("input").val();

var Recipient = $(this).find("td:eq(5)").find("input").val();

var StartDdate = $(this).find("td:eq(6)").find("input").val();

var EnDate = $(this).find("td:eq(7)").find("input").val();

var IsWork = $(this).find("td:eq(8)").find("input").val();

data += " <Title>" + Title + "</Title>";

data += " <Description>" + Description + "</Description>";

data += " <Target>" + Target + "</Target>";

data += " <Standard>" + Standard + "</Standard>";

data += " <Recipient>" + Recipient + "</Recipient>";

data += " <StartDdate>" + StartDdate + "</StartDdate>";

data += " <EnDate>" + EnDate + "</EnDate>";

data += " <IsWork>" + IsWork + "</IsWork>";

data += "</item>";

});

data += "</root>";

// alert(data);

$("#<%=HddfDate.ClientID %>").val(data);

$("#<%=BtnSaveDate.ClientID %>").click();

}

function setJson(jsontext, bol) {

if (typeof (tr) == "undefined") {

tr = $("#content tr:eq(1)").clone();

}

if (typeof (temptr) == "undefined") {

temptr = $("#content tr:eq(1)").clone();

}

if (jsontext != "") {

var object = eval(jsontext);

for (var i in object) {

$(temptr).find("td:eq(0)").find("input").attr("value", object[i].OrderID);

$(temptr).find("td:eq(1)").find("input").attr("value", object[i].Title);

$(temptr).find("td:eq(2)").find("input").attr("value", object[i].Description);

$(temptr).find("td:eq(3)").find("input").attr("value", object[i].Target);

$(temptr).find("td:eq(4)").find("input").attr("value", object[i].Standard);

var jdata = eval(object[i].Recipient);

var result = "";

if (bol) {

for (var j in jdata) {

result += "<div class='text_div'><div class='text_select' UserName='" + jdata[j].Name + "'>" + jdata[j].Displayname + "</div><div class='text-remove'></div></div>"

}

} else {

for (var j in jdata) {

result += "<div class='text_div'><div class='text_select' UserName='" + jdata[j].Name + "'>" + jdata[j].Displayname + "</div><div class='text-remove'></div></div>"

}

}

$(temptr).find("td:eq(5)").find("input").val(object[i].Recipient);

if (typeof (jdata) == "undefined") {

$(temptr).find("td:eq(5)").find(".User").html("");

} else {

$(temptr).find("td:eq(5)").find(".User").html(result);

}

try {

$(temptr).find("td:eq(6)").find("input").attr("value", object[i].StartDate.format("yyyy-MM-dd"));

}

catch (e) { $(temptr).find("td:eq(6)").find("input").attr("value", object[i].StartDate) }

try {

$(temptr).find("td:eq(7)").find("input").attr("value", object[i].Enddate.format("yyyy-MM-dd"));

}

catch (e) { $(temptr).find("td:eq(7)").find("input").attr("value", object[i].Enddate) }

$(temptr).find("td:eq(8)").find("select option[value='" + object[i].Iswork + "']").attr("selected", true);

$(temptr).find("td:last").html("<a onclick='Del(this)'>删除</a>")

$("#content").append('<tr>' + $(temptr).html() + '</tr>');

}

}

$("#content tr:eq(1)").remove();

}

//json 格式 未处理完全

<%-- function SaveData() {

var data = "{'item':[";

$('#content tr').each(function () {

data += "{";

var Title = $(this).find("td:eq(1)").find("input").val();

var Description = $(this).find("td:eq(2)").find("input").val();

var Target = $(this).find("td:eq(3)").find("input").val();

var Standard = $(this).find("td:eq(4)").find("input").val();

var Recipient = $(this).find("td:eq(5)").find("input").val();

var StartDdate = $(this).find("td:eq(6)").find("input").val();

var EnDate = $(this).find("td:eq(7)").find("input").val();

var IsWork = $(this).find("td:eq(8)").find("input").val();

data += "Title:" + Title + ",";

data += "Description" + Description + ",";

data += "Target" + Target + ",";

data += "Standard" + Standard + ",";

data += "Recipient" + Recipient + ",";

data += "StartDdate" + StartDdate + ",";

data += "EnDate" + EnDate + ",";

data += "IsWork" + IsWork + "";

data += "},";

});

data += "]}";

// alert(data);

$("#<%=HddfDate.ClientID %>").val(data);

$("#<%=BtnSaveDate.ClientID %>").click();

}--%>

//明细赋值

</script>

protected void btnSubmit_Click(object sender, EventArgs e)

{

string s = HddfDate.Value;//获取前台hiddenfield保存的数据。

XmlDocument doc = new XmlDocument();

doc.LoadXml(s);//转为xml

string jsonText = JsonConvert.SerializeXmlNode(doc);//xml转为json

//根据业务情况选择合适的数据格式进行处理。

}