jq进行table动态增删上下移动

来源:互联网 发布:算法基础 pdf 下载 编辑:程序博客网 时间:2024/06/04 20:10

        $(function () {
            $('#insertRow').click(function () {
                var $tr = $('#templateTr').clone(true);
                $tr.attr('id', '');
                $('#columnid tbody').append($tr);
                $tr.show();
            });


            $('#columnid .delrow').click(function () {
                var $tr = $(this).parents("tr");
                $tr.remove();
            });


            $('#columnid .moveup').on('click', function () {
                $(this).each(function () {
                    var $tr = $(this).parents("tr");
                    if ($tr.index() != 0) {
                        $tr.prev().before($tr);
                    }
                });
            });


            $('#columnid .movedown').on('click', function () {
                var trLength = $(this).length;
                $(this).each(function () {
                    var $tr = $(this).parents("tr");
                    if ($tr.index() != trLength - 1) {
                        $tr.next().after($tr);
                    }
                });
            });

        });






            <a class="btn btn-primary btn-sm" id="insertRow" href="javascript:void(0);">
                <span class="glyphicon glyphicon-plus"></span> 新增
            </a>
            <table id="columnid" class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr id="trcolumn">
                        <th>字段名称</th>
                        <th class="col-sm-1">字段类型</th>
                        <th>属性</th>
                        <th>参与主键</th>
                        <th class="col-sm-2">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="templateTr" style="display: none;">
                        <td><input type="text" class="form-control input-sm" placeholder="请输入字段名称" /></td>
                        <td>
                            <select class="form-control input-sm">
                                <option value="1">数字</option>
                                <option value="2">字符</option>
                                <option value="3">日期</option>
                            </select>
                        </td>
                        <td><input type="text" class="form-control input-sm" placeholder="如果是字符,填字符长度;如果是日期,填日期格式" /></td>
                        <td><label class="checkbox-inline"><input type="checkbox" name="bePk" />参与主键</label></td>
                        <td>
                            <a class="btn btn-primary btn-xs delrow" href="javacript:void(0);"><span class="glyphicon glyphicon-trash"></span> 删除</a>
                            <a class="btn btn-primary btn-xs moveup" href="javascript:void(0);"><span class="glyphicon glyphicon-arrow-up"></span> 上移</a>
                            <a class="btn btn-primary btn-xs movedown" href="javascript:void(0);"><span class="glyphicon glyphicon-arrow-down"></span> 下移</a>
                        </td>
                    </tr>
                </tbody>
            </table>






原创粉丝点击