ブートストラップテーブルに行を追加するバグ

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つのブロックにすべてを置くことを試みました。何も働いていないようです。 そして新しい行を追加するための私の方法は、このようなものです：行が追加されたときに、<td>から<option>のように設定されていると私はしたいと全体<select>を好きではない、どのような理由から、

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

、それ結局のように見える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))); 
} 

はこの後、それは完全に働きました。