首页 > 代码库 > 动态添加HTML表单控件,无(runat="server")

动态添加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=http://www.mamicode.com/‘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").valuehttp://www.mamicode.com/= "";                document.getElementById("tbP_P1").valuehttp://www.mamicode.com/= "";                document.getElementById("tbD_D1").valuehttp://www.mamicode.com/= "";            }        }
 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=http://www.mamicode.com/0>请选择.."; for (int i = 0; i < dt.Rows.Count; i++) { htmlselectName += "<option value=http://www.mamicode.com/" + 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=http://www.mamicode.com/0>请选择.."; for (int i = 0; i < dt.Rows.Count; i++) { html += "<option value=http://www.mamicode.com/" + dt.Rows[i]["EquipmentModel"].ToString() + ">" + dt.Rows[i]["EquipmentModel"].ToString() + "</option>"; } } HttpContext.Current.Response.Write(html); }