jquery實現table動態添加行、刪除行以及行的上移和下移 20190804新版

表格排序
//增加行       add_tr
//刪除行       remove_tr
//排序--向上   move_up
//排序--向下   move_down
//第一行只顯示向下，最後一行只顯示向上hide_move

@extends('layouts.public')

@section('head')
    <link rel="stylesheet" href="{{cdn('js/plugins/webuploader/single.css')}}">
@endsection

@section('bodyattr')class="gray-bg"@endsection

@section('body')
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <form method="post" class="form-horizontal ajaxForm">


                            {{--意見反饋高頻分詞開關 start--}}

                            <div class="form-group" style=" border-bottom:1px solid #ccc;">
                                <div class="col-sm-2" style=" font-size: 20px; font-weight: bold; line-height: 200%;">意見反饋高頻分詞開關</div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">開關</label>
                                <div class="col-sm-6">
                                    <p class="form-control-static">
                                        <input type="radio" name="words_switch" value="1" @if(isset($bigsetting['words_switch'])&&$bigsetting['words_switch']==1)checked="checked"@endif />開
                                        <input type="radio" name="words_switch" value="0" @if(!isset($bigsetting['words_switch'])||$bigsetting['words_switch']==0)checked="checked"@endif />關
                                    </p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label"></label>
                                <div class="col-md-10">
                                    <table cellspacing="1" cellpadding="0" style="width: 100%;"
                                           class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th align="center" style="width:50%;">分詞</th>
                                            <th align="center" style="width:30%;">權重</th>
                                            <th align="center">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="list_data_tbody">
                                        @if(isset($bigsetting['words_word'])&&isset($bigsetting['words_quanzhong'])&&$bigsetting['words_word']&&$bigsetting['words_quanzhong'])
                                            @foreach ($bigsetting['words_word'] as $key=>$vo)
                                                <tr class="list_tr" rel="{{$key}}">
                                                    <td align="center">
                                                        <input placeholder="分詞" id="range{{$key}}_1"
                                                               name="words_word[{{$key}}]"
                                                               value="{{$vo}}"
                                                               class="form-control" type="text"
                                                               autocomplete="off" required/>
                                                    </td>
                                                    <td align="center">
                                                        <input placeholder="權重" id="range{{$key}}_2"
                                                               name="words_quanzhong[{{$key}}]"
                                                               value="{{$bigsetting['words_quanzhong'][$key]}}"
                                                               class="form-control" type="number"
                                                               autocomplete="off" required/>
                                                    </td>
                                                    <td>
                                                        <a href="javascript:void(0);" οnclick="move_up(this)"
                                                           class="move_up" style="color: #58b4ef;">↑</a>&nbsp;
                                                        <a href="javascript:void(0);"
                                                           οnclick="remove_tr(this)"
                                                           style="color: #58b4ef;">刪除</a>&nbsp;
                                                        <a href="javascript:void(0);" οnclick="move_down(this)"
                                                           class="move_down" style="color: #58b4ef;">↓</a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                        <tr class="more_tr">
                                            <td colspan="4"><a href="javascript:add_tr()"
                                                               style="color: #58b4ef;">+增加分詞</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            {{--意見反饋高頻分詞開關 end--}}


                            <div class="form-group">
                                <div class="col-sm-6 col-sm-offset-2">
                                    <button class="btn btn-primary" type="submit">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        {{--意見反饋高頻分詞開關 start--}}
        <table style="display:none">
            <tr id="default_tr1">
                <td align="center">
                    <input placeholder="分詞" id="rangesort_id_1" name="words_word[sort_id]"
                           class="form-control" type="text" autocomplete="off" required/>
                </td>
                <td align="center">
                    <input placeholder="權重" id="rangesort_id_2" name="words_quanzhong[sort_id]"
                           class="form-control" type="number" autocomplete="off" required/>
                </td>
                <td>
                    <a href="javascript:void(0);" οnclick="move_up(this)" class="move_up" style="color: #58b4ef;">↑</a>&nbsp;
                    <a href="javascript:void(0);" οnclick="remove_tr(this)" style="color: #58b4ef;">刪除</a>&nbsp;
                    <a href="javascript:void(0);" οnclick="move_down(this)" class="move_down"
                       style="color: #58b4ef;">↓</a>
                </td>
            </tr>
        </table>
        {{--意見反饋高頻分詞開關 end--}}


    </div>
@endsection


@section('script')
    <script type="text/javascript">

        var tr_sort_id = 0;

        //增加行
        function add_tr() {
            var list_count = 0;
            $('.list_tr').each(function () {
                list_count += 1;
                var sort_id = $(this).attr('rel');
                sort_id = parseInt(sort_id);
                if (sort_id > tr_sort_id) tr_sort_id = sort_id;
            });
            tr_sort_id = tr_sort_id + 1;
            re = new RegExp("sort_id", "g");
            str = $('#default_tr1').html().replace(re, tr_sort_id);
            var html = '<tr class="list_tr" rel="' + tr_sort_id + '">' + str + '</tr>';
            if (list_count == 0) {
                $('#list_data_tbody tr').before(html);
            } else {
                $('.list_tr:last').after(html);
            }
            hide_move();
        }

        //刪除行
        function remove_tr(_this) {
            $(_this).parent().parent().remove();
            hide_move();
        }

        //排序--向上
        function move_up(obj) {
            var objParentTR = $(obj).parent().parent();
            var prevTR = objParentTR.prev();
            if (prevTR.length > 0) {
                prevTR.insertAfter(objParentTR);
            }
            hide_move();
        }

        //排序--向下
        function move_down(obj) {
            var objParentTR = $(obj).parent().parent();
            var nextTR = objParentTR.next();
            if (nextTR.length > 0) {
                nextTR.insertBefore(objParentTR);
            }
            hide_move();
        }

        //第一行只顯示向下，最後一行只顯示向上
        function hide_move() {
            $('.move_up').each(function () {
                $(this).show();
            });
            $('.move_down').each(function () {
                $(this).show();
            });
            $('.list_tr:first').find('.move_up').hide();
            $('.list_tr:last').find('.move_down').hide();
        }

        @if(isset($bigsetting['words_word'])&&isset($bigsetting['words_quanzhong'])&&$bigsetting['words_word']&&$bigsetting['words_quanzhong'])
        hide_move();
        @endif

    </script>


@endsection