学步园

HTML

<table id="contactTable" width="98%" border="0" align="center" cellpadding="0" cellspacing="1"
            bgcolor="#FAFAFA">
            <tr bgcolor="#F3F4F3" align="center" height="23">
                <td width="5%" style="font-weight: bold; font-size: 16px;">
                    序    号
                </td>
                <%--<td width="10%" style="font-weight: bold; font-size: 16px;">
                    员工编号
                </td>--%>
                <td width="10%" style="font-weight: bold; font-size: 16px;">
                    员工姓名
                </td>
                <td width="10%" style="font-weight: bold; font-size: 16px;">
                    状态
                </td>
                <td width="10%" style="font-weight: bold; font-size: 16px;">
                    性别
                </td>
                <td width="10%" style="font-weight: bold; font-size: 16px;">
                    联系电话
                </td>
                <td width="10%" style="font-weight: bold; font-size: 16px;">
                    部门
                </td>
                <td width="10%" style="font-weight: bold; font-size: 16px;">
                    操    作
                </td>
            </tr>
        </table>
        <input type="button" value="添加行" class="button" onclick="return contactlist();" />
        <input type="submit" value="提交" onclick="Sumbit()" />
        <input type='button' value='删除全部' onclick='deleteAll();' style="float: right;" />

javascript

<script type="text/javascript">
    function Sumbit() {
        var table = document.getElementById("contactTable");
        var index = table.rows.length - 1;

        for (var i = 1; i <= index; i++) {
            //ForValue("#code", i);
            debugger;
            var value_name = $("#name" + i).val();
            var value_state = $("#state" + i).val();
            var value_sex = $("#sex" + i).val();
            var value_tel = $("#tel" + i).val();
            var value_department = $("#department" + i).val();
            if (value_name == "" || value_state == "" || value_sex == "" || value_tel == "" || value_department == "") {
                alert("第" + i + "行存在有必填项未填写，请补充完整!");
                return;
            }
            $("#name" + i).attr("name", value_name + "|" + value_state + "|" + value_sex + "|" + value_tel + "|" + value_department);
        }
        debugger;
        $("#form1").attr("action", "FactWorkConditionEmployee.ashx");
    }

    function ForValue(id, i) {
        if ($(id + i).val() == "" || $("#code" + i).val() == null) {
            var value_name = $("#name" + i).val();
            $(id + i).val("code" + value_name);
        }
        var value = $(id + i).val();
        $(id + i).attr("name", value);
    }

    var count = 0;
    function contactlist() {
        var table = document.getElementById("contactTable");
        var tr = table.insertRow(table.rows.length); //添加一行
        tr.align = "center";
        tr.bgcolor = "#FAFAFA";
        tr.height = "23";

        //添加五列
        var td0 = tr.insertCell(0);
        td0.width = "5%";
        //        var td1 = tr.insertCell(1);
        //        td1.width = "10%";
        var td1 = tr.insertCell(1);
        td1.width = "10%";
        var td2 = tr.insertCell(2);
        td2.width = "10%";
        var td3 = tr.insertCell(3);
        td3.width = "10%";
        var td4 = tr.insertCell(4);
        td4.width = "10%";
        var td5 = tr.insertCell(5);
        td5.width = "10%";
        var td6 = tr.insertCell(6);
        td6.width = "10%";

        //设置列内容
        var index = table.rows.length - 1;
        count = count + 1;
        td0.innerHTML = index;
        //td1.innerHTML = "<input type='text' id='code" + index + "'/>";
        td1.innerHTML = "<font color='red'>*</font><input type='text' id='name" + count + "' onkeyup='validateNumber(this);' size='15' maxlength='8' style='color: red' />";
        td2.innerHTML = "<font color='red'>*</font><select id='state" + count + "'></select>";
        td3.innerHTML = "<font color='red'>*</font><select id='sex" + count + "'><option>男</option><option>女</option></select>";
        td4.innerHTML = "<font color='red'>*</font><input type='text' id='tel" + count + "' size='10' maxlength='13'/>";
        td5.innerHTML = "<font color='red'>*</font><select id='department" + count + "'><option>生产部</option></select>";
        td6.innerHTML = "<input type='button' value='删除' onclick='removeRow(this.parentNode.parentNode)'/>";


        var array = new Array();
        array = config.state.split('|');
        for (var i = 0; i < array.length; i++) {
            $("#state" + count).append("<option>" + array[i] + "</option>");
        }

        $("table tr").mouseover(function () {
            $(this).addClass("over");
        }).mouseout(function () {
            $(this).removeClass("over");
        });
    }

    function removeRow(r) {

        var array = new Array();
        var oldtable = document.getElementById("contactTable");
        var index = oldtable.rows.length - 1;
        for (var i = 1; i <= index; i++) {
            array.push(i);
        }
        var root = r.parentNode;
        var allRows = root.getElementsByTagName('tr');
        var deleteIndex = r.rowIndex;
        root.removeChild(r);

        var newtable = document.getElementById("contactTable");
        var newindex = newtable.rows.length - 1;
        for (var i = 1; i <= newindex; i++) {
            newtable.rows[i].cells[0].innerHTML = array[i - 1];
        }
    }

    function deleteAll() {
        var table = document.getElementById("contactTable");
        var tableLength = table.rows.length;
        for (var int = 2; int < tableLength; int++) {
            table.deleteRow(2);
        }
    }
</script>

 这里提交的是一个.ashx文件，不足的是当提交失败在前端进行return的时候   页面进行了刷新！这个问题一直未解决，欢迎哪位大神帮我解决！！

这里的下拉列表代码是这样的   借用了一个服务器控件

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

后端代码

namespace TCOA.WebSite.Page.ProjProcess
{
    public partial class FactWorkConditionEmployee1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = UnitConfig.SelectById("0bb712f50313407a9e41da064db4a3a4");
            Config config = new Config();
            config.state = dt.Rows[0]["VALUE"].ToString();
            string s = JsonHelper.SerializeJson(config);
            Literal1.Text = "<script type=\"text/javascript\">var config=" + s + "</script>";
        }
    }

    class Config
    {
        public string state { get; set; }
    }
}