动态添加HTML表单控件，无（runat="server"）
JS部分
<script> var allChildCount; //整个模块 allChildCount = 1; var sTxt = "<%=htmlselectName%>"; function addChildModel() { allChildCount++; var rown = filetb.rows.length; newRow = filetb.insertRow(rown); newRow.id = "mytdb" + allChildCount; newRow.name = "mytdb" + allChildCount; M1 = newRow.insertCell(0); var div = "<table>"; div += " <tr>"; div += " <td>名称</td>"; div += " <td>"; div += " <select id=\"ddl_name" + allChildCount + "\" style=\"width: 100px;\" class=\"validate-selection\" name=\"ddl_name" + allChildCount + "\" onchange=\"GetModel('ddl_name" + allChildCount + "','ddl_model" + allChildCount + "','<%=projectId %>');\"> <%=htmlselectName%> </select><font color=\"red\">*</font>"; div += " </td>"; div += " <td>型号</td>"; div += " <td>"; div += " <select id=\"ddl_model" + allChildCount + "\" style=\"width: 100px;\" class=\"validate-selection\" name=\"ddl_model" + allChildCount + "\" ><option></option></select><font color=\"red\">*</font>"; div += " </td>"; div += " <td>采购数量</td>"; div += " <td>"; div += " <input id=\"tbC_Q" + allChildCount + "\" name=\"tbC_Q" + allChildCount + "\" class=\"required\" type=\"text\" style=\"width: 100px;\" /><font color=\"red\">*</font>"; div += " </td>"; div += " <td>"; div += " 采购价格"; div += " </td>"; div += " <td>"; div += " <input id=\"tbP_P" + allChildCount + "\" name=\"tbP_P" + allChildCount + "\" class=\"required\" type=\"text\" style=\"width: 100px;\" />"; div += " </td>"; div += " <td>"; div += " 收货时间"; div += " </td>"; div += " <td>"; div += " <input id=\"tbD_D" + allChildCount + "\" name=\"tbD_D" + allChildCount + "\" class=\"required\" type=\"text\" onclick=\"WdatePicker()\" style=\"width: 100px;\" /><font color=\"red\">*</font>"; div += " <img src='images/del.gif' style='cursor: pointer;' width='15' height='15' onclick=\"removeModel(" + allChildCount + ")\" alt='删除型号' />"; div += " </td>"; div += " </tr>"; div += "</table>"; M1.innerHTML = div; } </script>
/*删除当前的索引行，从后往前删*/ function removeModel(count) { var o = confirm("确认删除?"); if (o) { var i var tdname var tdln var line = count; if (line > 0) { for (i = filetb.rows.length - 1; i >= 0; i--) { tdname = filetb.rows[i].name; tdln = tdname.substring(5, tdname.length); if (tdln == line) { filetb.deleteRow(i); } } } } }
/*清空第一项联系人*/ function deleteLinkMan() { var o = confirm("确认删除?"); if (o) { var otable = document.getElementById("filetb"); otable.rows[0].style.display = "none"; //隐藏固定的第一行 //otable.rows[1].style.display = "none"; //隐藏固定的第二行 $("#ddl_name1").val(0); $("#ddl_model1").val(0); document.getElementById("tbC_Q1").value = ""; document.getElementById("tbP_P1").value = ""; document.getElementById("tbD_D1").value = ""; } }
for (var i = beginRow; i <= allChildCount; i++) { if ($("#ddl_name" + i).length > 0) { //存在控件 //根据I，所有控件验证 } }
function GetModel(c1, c2, pid) { $.ajax({ url: "GetData.ashx", cache: false, data: { "type": "GetCModel", "name": $("#" + c1 + " option:selected ").text(), "pid": pid }, error: function () { alert("数据加载出错!"); }, success: function (myData, status) { $("#" + c2 + "").html(myData); } }); }
HTML部分
<tr> <td> 收货明细 </td> <td> <table id="filetb" style="font-size: 12px;"> <tr name="mytdb1"> <td> <table id="ctable"> <tr> <td> 名称 </td> <td> <select id="ddl_name1" style="width: 100px;" class="validate-selection" name="ddl_name1" onchange="GetModel('ddl_name1','ddl_model1','<%=projectId %>');"> <%=htmlselectName%> </select><font color="red">*</font> </td> <td> 型号 </td> <td> <select id="ddl_model1" style="width: 100px;" class="validate-selection" name="ddl_model1"> <option></option> </select><font color="red">*</font> </td> <td> 采购数量 </td> <td> <input id="tbC_Q1" name="tbC_Q1" class="required" type="text" style="width: 100px;" /><font color="red">*</font> </td> <td> 采购价格 </td> <td> <input id="tbP_P1" name="tbP_P1" class="required" type="text" style="width: 100px;" /> </td> <td> 收货时间 </td> <td> <input id="tbD_D1" name="tbD_D1" class="required" type="text" onclick="WdatePicker()" style="width: 100px;" /><font color="red">*</font> <img src='images/del.gif' style='cursor: pointer;' width='15' height='15' onclick="deleteLinkMan()" alt='删除型号' /> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td> </td> <td align="right"> <input type="button" class="buttoncss" value="增加型号" onclick="return addChildModel()" id="btnNew" /> </td> </tr>
后台CS部分：
public partial class IntegratedProject : BasePage
{
protected string htmlselectName = ""; //收货物品的名称
//绑定HTML中select if (dt != null && dt.Rows.Count > 0) { htmlselectName += "<option value=0>请选择..</option>"; for (int i = 0; i < dt.Rows.Count; i++) { htmlselectName += "<option value=" + dt.Rows[i]["EquipmentName"].ToString() + ">" + dt.Rows[i]["EquipmentName"].ToString() + "</option>"; } }
.ashx部分
using System.Web.SessionState;
/// <summary> /// GetData 的摘要说明 /// </summary> public class GetData : IHttpHandler, IRequiresSessionState {
public void ProcessRequest(HttpContext context) { //context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); if (context.Request.Params["type"] == "GetPartsModel") { GetPartsModel(context.Request.Params["partsId"]); }
public void GetCModel(string name, string pid) { IntegratedProjectBLL IPB = new IntegratedProjectBLL(); DataTable dt = IPB.GetEquipmentModel(name, pid); string html = ""; if (dt != null && dt.Rows.Count > 0) { html += "<option value=0>请选择..</option>"; for (int i = 0; i < dt.Rows.Count; i++) { html += "<option value=" + dt.Rows[i]["EquipmentModel"].ToString() + ">" + dt.Rows[i]["EquipmentModel"].ToString() + "</option>"; } } HttpContext.Current.Response.Write(html); }
