点击+添加新行并保存数据
Posted 吃回头草的马
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击+添加新行并保存数据相关的知识，希望对你有一定的参考价值。
1.基础表格
1 <table class="tableTempDetal" border="1" bordercolor="#000000" id="dataTempDatialTable"> 2 <tr style="background-color: #edf1fa;"> 3 <td class="detailsImg"> 4 <img src="../../Images/Glyph-Add.png" onclick="AddTemplateDetail()" alt="" /><input 5 type="hidden" id="hisContractResponsible" value="" /> 6 </td> 7 <td> 8 模框名称 9 </td> 10 <td> 11 标记ID 12 </td> 13 <td> 14 宽度 15 </td> 16 <td> 17 高度 18 </td> 19 <td> 20 适配说明 21 </td> 22 </tr> 23 <tr id="0" style="display: none;"> 24 <td> 25 <img src="../../Images/delete.png" alt="删除" id="imdDel0" name="imdDel0" onclick="DelTempDetail(this,0)" /> 26 </td> 27 <td> 28 <input type="text" class="RectangleName" id="RectangleName" name="RectangleName" 29 maxlength="10" value=\'\' /> 30 </td> 31 <td> 32 <input type="text" class="DivID" id="DivID" name="DivID" maxlength="16" value=\'\' /> 33 </td> 34 <td> 35 <input type="text" class="Width" id="Width" name="Width" maxlength="3" onkeyup=\'this.value=this.value.replace(/\\D/gi,"")\' 36 value=\'\' /> 37 </td> 38 <td> 39 <input type="text" class="Height" id="Height" name="Height" maxlength="3" onkeyup=\'this.value=this.value.replace(/\\D/gi,"")\' 40 value=\'\' /> 41 </td> 42 <td style="width: 100%; text-align: left;"> 43 <input type="text" style="width: 99%;" class="AdaptRemark" name="AdaptRemark" id="AdaptRemark" 44 maxlength="50" value="" /> 45 </td> 46 </tr> 47 <asp:Repeater runat="server" ID="rptTempDetailsList"> 48 <ItemTemplate> 49 <tr id="<%# Container.ItemIndex+1 %>"> 50 <td> 51 <img src="../../Images/delete.png" alt="删除" id="imdDel<%# Container.ItemIndex+1 %>" 52 name="imdDel0" onclick="DelTempDetail(this,<%#Eval("ID") %>)" /> 53 <input type="hidden" value="<%#Eval("ID") %>" class="TempDetailID" name="TempDetailID<%# Container.ItemIndex+1 %>" 54 id="TempDetailID<%# Container.ItemIndex+1 %>" /> 55 </td> 56 <td> 57 <input type="text" name="RectangleName<%# Container.ItemIndex+1 %>" id="RectangleName<%# Container.ItemIndex+1 %>" 58 class="RectangleName" value=\'<%# Eval("RectangleName") %>\' /> 59 </td> 60 <td> 61 <input type="text" name="DivID<%# Container.ItemIndex+1 %>" id="DivID<%# Container.ItemIndex+1 %>" 62 class="DivID" value=\'<%# Eval("DivID") %>\' /> 63 </td> 64 <td> 65 <input type="text" name="Width<%# Container.ItemIndex+1 %>" id="Width<%# Container.ItemIndex+1 %>" 66 class="Width" value=\'<%# Eval("Width") %>\' maxlength="4" onkeyup=\'this.value=this.value.replace(/\\D/gi,"")\' /> 67 </td> 68 <td> 69 <input type="text" name="Height<%# Container.ItemIndex+1 %>" id="Height<%# Container.ItemIndex+1 %>" 70 class="Height" value=\'<%# Eval("Height") %>\' maxlength="4" onkeyup=\'this.value=this.value.replace(/\\D/gi,"")\' /> 71 </td> 72 <td style="width: 100%; text-align: left;"> 73 <input type="text" name="AdaptRemark<%# Container.ItemIndex+1 %>" id="AdaptRemark<%# Container.ItemIndex+1 %>" 74 class="AdaptRemark" value=\'<%# Eval("AdaptRemark") %>\' style="width: 99%;" /> 75 </td> 76 </tr> 77 </ItemTemplate> 78 </asp:Repeater> 79 </table>
2.+新行
1 //新增模框 2 function AddTemplateDetail() { 3 //在table中添加一行数据行，参数为所在table的id，每个数据行必须为tr命名id=行号，表头行和统计行不需要 4 //页面中必须引入jquery.js 5 var tableId = "dataTempDatialTable"; 6 var trNewIndex = 0; 7 var trLast = $("#" + tableId).find("tr[id]:last"); 8 trNewIndex = parseInt(trLast.attr("id")) + 1; 9 var trNew = trLast.clone(); 10 trNew.attr("id", trNewIndex); //行号 11 trNew.find("span:first").text(trNewIndex); //序号赋值 12 trNew.find("td").each(function () { 13 $(this).children("[type!=\'button\']").each(function () { 14 $(this).attr("id", $(this).attr("id").replace(trNewIndex - 1, trNewIndex)); 15 $(this).attr("name", $(this).attr("id")); 16 $(this).val(""); 17 }); 18 }); 19 trNew.show(); 20 trLast.after(trNew); 21 22 TempDetailCount(); 23 }
3.X删除行
1 //删除模框行 2 function DelTempDetail(obj, id) { 3 var trs = $(obj).parent("td").parent("tr"); 4 $(trs).remove(); 5 }
4.隐藏域 保存多行值
1 //设置模框行中，对应input的ID和name 2 function setTempDetailValue() { 3 var ids = new Array(); 4 var result = ""; 5 $("#dataTempDatialTable tr:gt(1)").each(function (index) { 6 $(this).find(".TempDetailID").attr("ID", "TempDetailID" + (index + 1)).attr("name", "TempDetailID" + (index + 1)); 7 $(this).find(".RectangleName").attr("ID", "RectangleName" + (index + 1)).attr("name", "RectangleName" + (index + 1)); 8 $(this).find(".DivID").attr("ID", "DivID" + (index + 1)).attr("name", "DivID" + (index + 1)); 9 $(this).find(".Width").attr("ID", "Width" + (index + 1)).attr("name", "Width" + (index + 1)); 10 $(this).find(".Height").attr("ID", "Height" + (index + 1)).attr("name", "Height" + (index + 1)); 11 $(this).find(".AdaptRemark").attr("ID", "AdaptRemark" + (index + 1)).attr("name", "AdaptRemark" + (index + 1)); 12 ids.push(parseInt($(this).find("input[type=\'hidden\']").val())); 13 }); 14 result = ids.join(","); 15 $("#hidTempDatailTable").val(result); 16 }
5.后台取值
1 #region 模板明细表（模框） 2 T_COM_TemplateDetail tempDetail = null; 3 for (int i = 1; i <= tempDetailLength; i++) 4 { 5 if (uid == 0) 6 tempDetail = new T_COM_TemplateDetail(); 7 else 8 tempDetail = T_COM_TemplateDetailBll.Instance.GetModel(Convert.ToInt32(Request.Form["TempDetailID" + i].Trim())); 9 10 tempDetail.RectangleName = Request.Form["RectangleName" + i].Trim(); 11 tempDetail.DivID = Request.Form["DivID" + i].Trim(); 12 tempDetail.Width = Convert.ToInt32(Request.Form["Width" + i].Trim()); 13 tempDetail.Height = Convert.ToInt32(Request.Form["Height" + i].Trim()); 14 tempDetail.AdaptRemark = Request.Form["AdaptRemark" + i].Trim(); 15 tempDetail.IsDelete = false; 16 17 if (uid == 0) 18 { 19 tempDetail.TempID = T_COM_TemplateDetailBll.Instance.MaxTemplateId(); 20 tempDetail.CreateBy = CurrentUser.UserName; 21 tempDetail.CreateTime = DateTime.Now; 22 T_COM_TemplateDetailBll.Instance.Add(tempDetail); 23 } 24 else 25 { 26 tempDetail.TempID = temp.ID; 27 tempDetail.CreateBy = temp.CreateBy; 28 tempDetail.CreateTime = temp.CreateTime; 29 tempDetail.UpdateBy = CurrentUser.UserName; 30 tempDetail.UpdateTime = DateTime.Now; 31 T_COM_TemplateDetailBll.Instance.Update(tempDetail); 32 } 33 } 34 35 #endregion
以上是关于点击+添加新行并保存数据的主要内容，如果未能解决你的问题，请参考以下文章