基于jQuery表单快速录入数据功能

一、功能介绍

完全依靠jQuery，表单table新增行（按键盘tab增一行，按esc删一行），也可以加一个新增行按钮点击新增多行，这里就不多说了~~

二、该功能主要实现技术：

1，总体.NET MVC

2，前台：bootstrap，jQuery

3，后台：EF框架。

三、代码展示

1、HTML代码：

@model MSModel.Menus
<table id="tbCate" class="table invoice-table">
                <thead>
                    <tr>
                        <th></th>
                        <th>类型</th>
                        <th>菜名</th>
                        <th>价格</th>
                        <th>单位</th>
                        <th>备注</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @for (var i = 0; i < Model.Menu.Count; i++)
                    {
                        <tr>
                            <td>1</td>
                            <td>
                                @*@Html.DropDownList("selCateType0", ViewBag.MenuList as IEnumerable<SelectListItem>)*@ @*, new { @name = "selCateType" }*@
                                <select id="selCateType0"></select>
                                @Html.TextBoxFor(c => c.Menu[i].Type, new { @type = "hidden" })
                            </td>
                            <td>
                                @Html.TextBoxFor(c => c.Menu[i].Name, new { @class = "form-control" })
                            </td>
                            <td>
                                @Html.TextBoxFor(c => c.Menu[i].Price, new { @class = "form-control", @type = "number" })
                            </td>
                            <td>@Html.TextBoxFor(c => c.Menu[i].Unit, new { @class = "form-control" })</td>
                            <td width="226">
                                @Html.TextAreaFor(c => c.Menu[i].Remark, new { @class = "form-control", @rows = "1", @cols = "16" })
                            </td>
                            <td><a href="javascript:void(0)" class="navbar-link glyphicon glyphicon-remove"></a></td>
                        </tr>
                    }
                </tbody>
            </table>

2、JS代码：

<script type="text/javascript">
    var keydwonc;
    var temptr;
    var temp;

    $(function () {
        temptr = $("#tbCate tbody").first().html(); //复制行 下面新增行用到
        temp = $("#tbCate tbody").html();//保存渲染前的模板 
　　　　　//easyUI下拉绑定
        $("#tbCate select").combobox({
            width: 210, height: 34, editable: true,
            url: '/Cates/GetCateListbyType',
            valueField: 'Id', textField: 'Type',
            mode: 'remote', hasDownArrow: false,//是否显示下拉箭头
            onBeforeLoad: function (param) {
                if (param == null || param.q == null || param.q.replace(/ /g, '') == '') {
                    var value = $(this).combobox('getValue');
                    if (value) {// 修改的时候才会出现q为空而value不为空
                        param.id = value;
                        return true;
                    }
                    return false;
                }
            }
        });
        $("#tbCate a").remove();//删除第一个删除按钮
        $('#Menu_0__Price').val("");
　　　　　//==============此处给第二行(新增行)赋的事件================
        keydwonc = function (et) {
　　　　　　　//按键盘tab新增一行
            if (event.keyCode == 9) {
                //$(et).unbind();//取消当前事件
                var rowNo = $("#tbCate tbody tr").size();
                var index = Number($("#tbCate tbody tr td").find('textarea').last().attr("name").match(/\d+/)[0]);
                $(temptr).appendTo($("#tbCate tbody")).find("a").click(function () {
                    $(this).parent().parent().remove();//删除整行
                }).parent().parent().find("select").last().combobox({
                    width: 210, height: 34, editable: true,
                    url: '/Cates/GetCateListbyType',
                    valueField: 'Id', textField: 'Type',
                    mode: 'remote', hasDownArrow: false,//是否显示下拉箭头
                    onBeforeLoad: function (param) {
                        if (param == null || param.q == null || param.q.replace(/ /g, '') == '') {
                            var value = $(this).combobox('getValue');
                            if (value) {// 修改的时候才会出现q为空而value不为空
                                param.id = value;
                                return true;
                            }
                            return false;
                        }
                    }
                });//加载新行并渲染
                $(et).parent().parent().nextAll().last().find("td:first").html(rowNo + 1);//新增行自增编号
                //新行 属性改变
                $(et).parent().parent().nextAll().last().find("input,select,textarea").each(function (i) {
                    $(this).val("");
                    //combobox 属性改变
                    var attid = $(this).attr("id");
                    var attname = $(this).attr("name");
                    var attcomboname = $(this).attr("comboname");
                    var newindex = index + 1;
                    if (attid)
                        $(this).attr("id", attid.replace(/\d+/, newindex));
                    if (attname)
                        $(this).attr("name", attname.replace(/\d+/, newindex));
                    if (attcomboname)
                        $(this).attr("comboname", attcomboname.replace(/\d+/, newindex));

                    if ($(this).attr("name") == "Menu[" + newindex + "].Remark") {                        $(this).attr("onkeydown", "keydwonc(this)");
                    }
                })
            } else if (event.keyCode == 27) { //按esc删一行
                if ($('#tbCate tbody tr').size() > 1) {
                    $(et).parents('tr').remove();
                    //光标返回聚焦
                    $('#tbCate tbody tr').find('textarea').last().focus();
                }
            }
        };
　　　　　//================此处第一行事件==========================
        var tr = $("#tbCate tbody tr");
        tr.each(function () {
            $(this).find('textarea').last().keydown(function (e) {
                if (e.keyCode == 9) {
                    var rowNo = $("#tbCate tbody tr").size();

                    var index = Number($("#tbCate tbody tr td").find('textarea').last().attr("name").match(/\d+/)[0]);
                    //新增行，开始
                    $(temp).appendTo($("#tbCate tbody")).find("a").click(function () {
                        $(this).parent().parent().remove();//删除整行
                    }).parent().parent().find("select").combobox({
                        width: 210, height: 34, editable: true,
                        url: '/Cates/GetCateListbyType',
                        valueField: 'Id', textField: 'Type',
                        mode: 'remote', hasDownArrow: false,//是否显示下拉箭头
                        onBeforeLoad: function (param) {
                            if (param == null || param.q == null || param.q.replace(/ /g, '') == '') {
                                var value = $(this).combobox('getValue');
                                if (value) {// 修改的时候才会出现q为空而value不为空
                                    param.id = value;
                                    return true;
                                }
                                return false;
                            }
                        }
                    });//加载新行并渲染
                    $(this).parent().parent().nextAll().last().find("td:first").html(rowNo + 1);//新增行自增编号
                    //新增行 最后一行属性改变
                    $(this).parent().parent().nextAll().last().find("input,select,textarea").each(function (i) {
                        $(this).val("");
                        //combobox 属性改变
                        var attid = $(this).attr("id");
                        var attname = $(this).attr("name");
                        var attcomboname = $(this).attr("comboname");
                        var newindex = index + 1;
                        if (attid)
                            $(this).attr("id", attid.replace(/\d+/, newindex));
                        if (attname)
                            $(this).attr("name", attname.replace(/\d+/, newindex));
                        if (attcomboname)
                            $(this).attr("comboname", attcomboname.replace(/\d+/, newindex));
                        if ($(this).attr("name") == "Menu[" + newindex + "].Remark") {
                            $(this).attr("onkeydown", "keydwonc(this)");
                        }
                    })
                }
            });
        });
    });
   </script>

四、效果图：

五、总结

本人写的jQuery按tab键新增行这套逻辑代码算是中规中矩的，可以说不是很简洁的，肯定还有地方要优化，欢迎有看到的园友来指正，哈哈。

能与大家共同学习进步是我最大的兴趣！！