在引导表中添加行错误

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> 

我尝试过和<td>后放置<select>甚至我试图把一切都在@isset 2个街区。似乎没有任何工作。 而我的方法添加一个新行是这样的：

<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))); 
} 

在此之后，它的工作完美。