Laravel 6 - 如何使用 LaravelCollective 创建具有动态行的 table？

Question

我想使用 LaravelCollective 创建动态 table，您可以在其中 add/remove 行。

我已经尝试按照一些教程进行操作，但总是失败。我不知道我做错了什么。

Html 代码为 table/form

{{ 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() }}

我用来 add/remove 行的脚本

<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: $ is not defined

Answer 1

$指的是jQuery，你有没有把它添加到你的项目中，它在这个范围内可用吗？

注意：它需要出现在你的脚本之前

jQuery 可能在该脚本运行时未加载，您可以尝试使用 $(document).ready({ }) 包装您的脚本，以便在 jQuery 已加载

时运行它

Laravel 6 - 如何使用 LaravelCollective 创建具有动态行的 table？

Laravel 6 - How to create a table with dynamic rows using LaravelCollective?

html

laravel

laravelcollective

laravel-6