在引导表错误中添加行

Posted 2023-03-14

【中文标题】在引导表错误中添加行

【英文标题】：Add row in bootstrap table bug

【发布时间】：2018-03-22 20:15:33

【问题描述】：

我在表格中需要一些帮助。 代码如下所示：

<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 的两个块中。似乎没有任何工作。 我添加新行的方法是这样的：

<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>

无论出于何种原因，当添加一行时，设置为类似于<td> 中的<option>，而不是我希望的整个<select>，它最终看起来像this.

我做错了什么？

【参考方案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)));

在这之后，它工作得很好。