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

【问题标题】：Laravel 6 - How to create a table with dynamic rows using LaravelCollective?Laravel 6 - 如何使用 LaravelCollective 创建具有动态行的表？
【发布时间】：2023-04-05 01:02:01
【问题描述】：

我想使用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>

当我按下+ 按钮添加更多行时，它什么也没做，当我在浏览器中检查代码时，我发现了这个错误：

未捕获的引用错误：$ 未定义

【问题讨论】：

你在使用这个语法之前是否包含了 JQuery 文件？
@HH 谢谢，我只是将jquery 直接添加到了blade，我不明白我已经将jquery 放在了我的sidebar.blade.app 中，这是我使用的侧边栏blade 为什么我需要在这个blade 中再写一遍。我虽然sidebar.blade.app 中的jquery 是每个blade 的，只要他们使用sidebar。
@Aditya 运行该脚本时可能没有加载 jQuery，您可以尝试使用 $(document).ready({ }) 包装您的脚本，以便在 jQuery 加载时运行它
@Aditya 对你有用吗？
@HH 是的，它现在可以工作了，只需在顶部添加 cdn

标签： html laravel laravel-6 laravelcollective

【解决方案1】：

$ 指的是 jQuery，您是否已将其添加到您的项目中，是否在此范围内可用？

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

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

【讨论】：