Laravel Blade中如何在jQuery的append中正确拼接<tr>动态行？

嘿，我看到你在尝试给id为dynamic_field的表格动态添加带完整表单元素的行时遇到了语法错误，这大概率是直接拼接HTML字符串时的引号冲突导致的，另外你还需要把新增行里的“添加更多演出”按钮替换成删除叉号。我来一步步帮你解决这个问题！

问题根源 #

直接把HTML代码硬塞进$('#dynamic_field').append()的字符串里时，HTML本身的单双引号会和你包裹字符串的引号发生冲突，JavaScript解析时就会抛出语法错误。另外你需要保留原行的所有表单控件，只替换最后一列的按钮，而不是简单复制原行。

解决方案 #

1. 使用**JavaScript模板字符串（反引号``包裹）**来构建新增行的HTML，这样内部的单双引号都不会和外层冲突，代码可读性也更强。
2. 把表单元素的name属性改成数组形式（比如name="concertRoom[]"），这样后端Laravel能正确接收多行的表单数据，不然同名的表单只会提交最后一个值。
3. 构建新增行时，保留原行的所有表单控件，只把最后一列的添加按钮换成删除按钮。

修改后的完整代码 #

@extends ('layout.layout')
@section('containerContent')
<div class="col-md-12">
    <form method="POST" enctype="multipart/form-data" id="add_tour">
        {{ csrf_field() }}
        @if (count($errors))
            <div class="form-group">
                <div class="alert alert-danger">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        <div class="content">
            <h1>Create a new Tour:</h1>
            <div class="form-group">
                <div class="col-lg-6">
                    <input class="form-control" type="text" name="tourLabel" placeholder="Tour label">
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-6">
                    <textarea class="form-control" placeholder="Resume of tour" name="tourResume" rows="3"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-6">
                    <select id='nameArtist' name='nameArtist'>
                        <option value=''>Select Music Artist or Band</option>
                        @foreach ($artists as $artist)
                            <option value="{{ $artist->id }}">{{ $artist->artist_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <h2 align="center">Add Concert to your Tour:</h2>
            <div class="table-responsive">
                <table class="table table-bordered" id="dynamic_field">
                    <tr>
                        <td>
                            <select name='concertRoom[]'>
                                <option>Select your concert room</option>
                                @foreach ($roomsconcert as $room)
                                    <option value="{{ $room->id }}">{{ $room->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td><input class="form-control" type="date" name="dateConcert[]"></td>
                        <td><input class="form-control" type="text" name="concertDuration[]" placeholder="Duration of the event (min)"></td>
                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More concert</button></td>
                    </tr>
                </table>
            </div>
            <a class="btn btn-primary" href="{{route('show-tour') }}" > Back </a>
            <button class="btn btn-success" type="submit"> {{ 'Submit' }}</button>
        </div>
    </form>
</div>
<script type="text/javascript">
$(document).ready(function(){
    var i = 1;
    $('#add').click(function() {
        i++;
        // 使用模板字符串构建新增行的HTML，避免引号冲突
        var newRow = `
        <tr id="row${i}" class="dynamic-added">
            <td>
                <select name='concertRoom[]'>
                    <option>Select your concert room</option>
                    @foreach ($roomsconcert as $room)
                        <option value="{{ $room->id }}">{{ $room->name }}</option>
                    @endforeach
                </select>
            </td>
            <td><input class="form-control" type="date" name="dateConcert[]"></td>
            <td><input class="form-control" type="text" name="concertDuration[]" placeholder="Duration of the event (min)"></td>
            <td><button type="button" name="remove" id="${i}" class="btn btn-danger btn_remove">X</button></td>
        </tr>
        `;
        $('#dynamic_field').append(newRow);
    });

    $(document).on('click','.btn_remove',function () {
        var button_id = $(this).attr("id");
        $('#row'+button_id).remove();
    });

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
});
</script>
@endsection

关键修改点说明 #

• 把所有表单控件的name改成了数组形式（比如concertRoom[]），这样后端可以通过$request->concertRoom获取所有行的演出场地数据。
• 使用模板字符串（反引号）构建新增行的HTML，彻底解决了引号冲突的问题。
• 新增行里保留了所有原表单元素，只把最后一列的“添加”按钮替换成了删除叉号按钮。

内容的提问来源于stack exchange，提问作者bruno