Laravel 6 - Как создать таблицу с динамическими строками, используя LaravelCollective? - PullRequest
Новая
       28

Laravel 6 - Как создать таблицу с динамическими строками, используя LaravelCollective?

0 голосов
/ 22 октября 2019

Я хочу создать динамическую таблицу, используя LaravelCollective, где вы можете добавлять / удалять строки.

Я уже пытался следовать нескольким учебникам, но продолжаю терпеть неудачу. Я не знаю, что я делаю неправильно.

HTML-код для таблицы / формы 

{{ Form::open(['action' => 'TransactionsINController@store', 'method' => 'POST']) }}
<section>
    <div class="panel panel-header">
        <div class="form-group">
            {{ Form::label('supplier_name', 'Supplier Name') }}
            {{ Form::select('supplier_name', $supplierList->pluck('name', 'id'), 
            null, ['class' => 'form-control', 'placeholder' => 'Pick one supplier...']) }}
        </div>
        <div class="form-group">
            {{ Form::label('transaction_in_date', 'Transcation Date') }} <br>
            {{ Form::date('transaction_in_date', \Carbon\Carbon::now()->format('d M Y')) }}
        </div>
    </div>

    <div class="panel panel-footer">
        <table class="table table-hover table-bordered" id="">
            <thead align="center">
                <tr>
                    <th>Device Type</th>
                    <th>Spec</th>
                    <th>Price</th>
                    <th><a href="#" class="btn btn-success addRow">
                        <i class="fa fa-plus"></i>
                        </a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="form-group">
                            {{ Form::select('device_type_name[]', $deviceTypeList->pluck('name_tipe_device', 'id'), 
                            null, ['class' => 'form-control', 'placeholder' => 'Pick Device Type...', 'name' => 'device_type_name[]']) }}
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            {{ Form::textarea('device_spec[]', '', 
                            ['class' => 'form-control', 'placeholder' => 'Device Spec', 'rows' => 5, 'cols' => 45, 'name' => 'device_spec[]']) }}
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            {{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}
                        </div>
                    </td>
                    <td>
                        <a href="#" class="btn btn-danger remove">
                            <i class="fa fa-times"></i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
{{ Form::button('<i class="far fa-save"></i> Submit', ['type' => 'submit', 'class' => 'btn btn-info'] )  }}
{{ Form::close() }}

Скрипт, который я использую для добавления /удалить строки 

<script type="text/javascript">
        $('.addRow').on('click', function(){      \\Uncaught ReferenceError: happen in this line.
            addRow();
        });

        function addRow(){
            var tr = '<tr>'+
                '<td>'+
                    '<div class="form-group">'+
                        '{{ Form::select('device_type_name[]', $deviceTypeList->pluck('nama_tipe_device', 'id'),
                        null, ['class' => 'form-control', 'placeholder' => 'Pick Device Type...', 'name' => 'device_type_name[]']) }}'+
                    '</div>'+
                '</td>'+
                '<td>'+
                    '<div class="form-group">'+
                        '{{ Form::textarea('device_spec[]', '',
                        ['class' => 'form-control', 'placeholder' => 'Device Spec', 'rows' => 5, 'cols' => 45, 'name' => 'device_spec[]']) }}'+
                    '</div>'+
                '</td>'+
                '<td>'+
                    '<div class="form-group">'+
                        '{{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}'+
                    '</div>'+
                '</td>'+
                '<td>'+
                    '<a href="#" class="btn btn-danger remove">'+
                        '<i class="fa fa-times"></i>'+
                    '</a>'+
                '</td>'+
            '</tr>';
            $('tbody').append(tr);
        }
    </script>

Когда я нажимаю кнопку +, чтобы добавить больше строк, ничего не происходит, и когда я проверял код в браузере, я обнаружил эту ошибку:

Uncaught ReferenceError: $ не определено

1 Ответ

0 голосов
/ 22 октября 2019

$ относится к jQuery, вы добавили его в свой проект и он доступен в этой области?

Примечание: оно должно присутствовать до того, как ваш скрипт

Возможно, jQuery не загрузился при запуске этого скрипта, вы можете попробовать обернуть ваш скрипт в $(document).ready({ }), так чтозапускает его, когда jQuery загрузил

...