jquery - 在 Bootstrap 表中添加行错误

Question

我需要一些表格方面的帮助。 代码如下所示:

<div class="col-md-6">
    <table class="table">
        <tbody id="request_profile_language_table">  
            <tr>                    
                <td id="request_profile_languages">
                    @isset($requestProfile)
                    @foreach($requestProfile->languages as $index=>$requestProfileLanguage)
                    <select {{ (FALSE == $canEdit) ? 'readonly':'' }} class="form-control form-select" id="{{ 'request_profile_language_'.$index }}" name="{{ 'request_profile_language_'.$index }}" placeholder="Language">
                        @foreach($languages as $r=>$language)
                        <option {{ ($language->name == $requestProfileLanguage->language->name) ? 'selected':'' }} value="{{ $language->value }}" >{{ $language->name }}</option>
                        @endforeach
                    </select>
                    @endforeach
                    @else
                    <select {{ (FALSE == $canEdit) ? 'readonly':'' }} class="form-control form-select" id="request_profile_language_0" name="request_profile_language_0" placeholder="Language">
                        @foreach($languages as $r=>$language)
                        <option {{ ($language->name == 'English') ? 'selected':'' }} value="{{ $language->value }}" >{{ $language->name }}</option>
                        @endforeach
                    </select>
                    @endisset
                </td>
                <td id="request_profile_language_levels">
                    @isset($requestProfile)
                    @foreach($requestProfile->languages as $index=>$requestProfileLanguage)  
                    <select {{ (FALSE == $canEdit) ? 'readonly':'' }} class="form-control form-select" id="{{ 'request_profile_language_level_'.$index }}" name="{{ 'request_profile_language_level_'.$index }}" placeholder="Language level">
                        @foreach($languageLevels as $r=>$languageLevel)
                        <option {{ ($languageLevel->name == $requestProfileLanguage->languageLevel->name) ? 'selected':'' }} value="{{ $languageLevel->value }}" >{{ $languageLevel->name }}</option>
                        @endforeach
                    </select>
                    @endforeach
                    @else
                    <select {{ (FALSE == $canEdit) ? 'readonly':'' }} class="form-control form-select" id="request_profile_language_level_0" name="request_profile_language_level_0" placeholder="Language level">
                        @foreach($languageLevels as $r=>$languageLevel)
                        <option {{ ($languageLevel->name == 'Intermediate') ? 'selected':'' }} value="{{ $languageLevel->value }}" >{{ $languageLevel->name }}</option>
                        @endforeach
                    </select>
                    @endisset
                </td>      
                <td id="request_profile_language_remove">
                    @isset($requestProfile)
                    @foreach($requestProfile->languages as $index=>$requestProfileLanguage)  
                    @if(0 == $index)
                    <button class="glyphicon glyphicon-remove form-control" id="{{ 'request_profile_language_remove_'.$index }}" readonly/>
                    @else
                    <button class="glyphicon glyphicon-remove form-control" id="{{ 'request_profile_language_remove_'.$index }}" name="{{ 'request_profile_language_remove_'.$index }}" onclick="return deleteLanguage(this)"/>
                    @endif
                    @endforeach
                    @else
                    <button class="glyphicon glyphicon-remove form-control" readonly/>
                    @endisset  
                </td>
            </tr>
        </tbody>
    </table>
</div>    
<div class="col-md-3">
    <ul class="list-unstyled" id="button_list">
        <li>
            <button class="btn btn-success btn-small" id="add_new_language">Add New Language</button>              
        </li>
    </ul>
</div>            
</div>

我试图放置 <select>前后<td>甚至我试图将所有内容都放在 @isset 的 2 个 block 中。似乎没有任何效果。 我添加新行的方法是这样的:

<script>
    function addNewLanguage() {
        var count = $('#request_profile_languages').children('tr').length;

        var select_language = $('#request_profile_languages')
                .children().first()
                .children().first()
                .clone()
                .attr('id', idRequestProfileLanguage.concat(count))
                .attr('name', idRequestProfileLanguage.concat(count));

        var select_language_level = $('#request_profile_language_levels')
                .children().first()
                .children().first()
                .clone()
                .attr('id', idRequestProfileLanguageLevel.concat(count))
                .attr('name', idRequestProfileLanguageLevel.concat(count));

        var remove_language = $('<button />')
                .addClass("glyphicon")
                .addClass("glyphicon-remove")
                .addClass("form-control")
                .prop('id', idRequestProfileLanguageRemove.concat(count))
                .prop('name', idRequestProfileLanguageRemove.concat(count))
                .on('click', function () {
                    select_language.remove();
                    select_language_level.remove();
                    remove_language.remove();

                    event.preventDefault();
                });
        $('#request_profile_language_table').append($('<tr>').append($('<td>').append(select_language), $('<td>').append(select_language_level), $('<td>').append(remove_language)));
    }
</script>

无论出于何种原因，当添加一行时，设置类似于 <option>来自<td>不像整个<select>正如我所愿，它最终看起来像 this.

我做错了什么？

Answer 1

我设法找到答案。该方法应如下所示:

<script>
function addNewLanguage() {
    var count = $('#request_profile_languages_table').children('tr').length;

    var select_language = $('#request_profile_languages')
            .clone()
            .attr('id', idRequestProfileLanguage.concat(count))
            .attr('name', idRequestProfileLanguage.concat(count));

    var select_language_level = $('#request_profile_language_levels')
            .clone()
            .attr('id', idRequestProfileLanguageLevel.concat(count))
            .attr('name', idRequestProfileLanguageLevel.concat(count));

    var remove_language = $('<button />')
            .addClass("glyphicon")
            .addClass("glyphicon-remove")
            .addClass("form-control")
            .prop('id', idRequestProfileLanguageRemove.concat(count))
            .prop('name', idRequestProfileLanguageRemove.concat(count))
            .on('click', function () {
                select_language.closest('tr').remove();

                event.preventDefault();
            });
    $('#request_profile_language_table').append($('<tr>').append($('<td>').append(select_language), $('<td>').append(select_language_level), $('<td>').append(remove_language)));
}

此后，一切顺利。