ブートストラップテーブルの行の詳細 - ajaxデータ

Question

ブートストラップテーブル内のローの詳細情報を、パラメータとしてidを持つAjaxコール経由でロードしています。
この詳細は、グリフアイコンボタンを使用して折りたたみ可能な行内に表示されます。

しかし、ボタンをクリックすると、行が折り畳まれて表示が歪んでしまいます。
コードは正しいように見えますが、私は修正を見つけるのに苦労しました。
は、あなたのelseブロックで間違ったいくつかのものがありますjsFiddle here

var parentsData = { 
 
    "success": true, 
 
    "parents": [{ 
 
    "id": 1531, 
 
    "Firstname": "Austin", 
 
    "Surname": "Ana\u00eblle", 
 
    "schoolId": "046039", 
 
    "schoolName": "ARCAMBAL", 
 
    "commune": "ARCAMBAL" 
 
    }, { 
 
    "id": 2032, 
 
    "Firstname": "Ramos", 
 
    "Surname": "L\u00e8i", 
 
    "schoolId": "046043", 
 
    "schoolName": "J CALVET", 
 
    "commune": "CAHORS" 
 
    }, { 
 
    "id": 3036, 
 
    "Firstname": "Baker", 
 
    "Surname": "Salom\u00e9", 
 
    "schoolId": "046043", 
 
    "schoolName": "Z LAFAGE", 
 
    "commune": "CAHORS" 
 
    }, { 
 
    "id": 1724, 
 
    "Firstname": "Berry", 
 
    "Surname": "Marl\u00e8ne", 
 
    "schoolId": "046044", 
 
    "schoolName": "J CALVET", 
 
    "commune": "CAHORS" 
 
    }] 
 
}; 
 

 
var $table = $('.js-table'); 
 
$table.find('.js-view-parents').on('click', function(e) { 
 
    e.preventDefault(); 
 
    if (!$(this).closest('tr').next('tr').hasClass('expand-child')) { 
 

 
    $(e.target).toggleClass('glyphicon-eye-close glyphicon-eye-open'); 
 

 
    $(".expand-child").slideUp(); 
 
    var $this = $(this).closest('tr'); 
 
    var rowId = $(this).data('id'); 
 

 
    var newRow = '<tr class="expand-child">' + '<td colspan="12" id="collapse' + rowId + 
 
     '">' + 
 
     '<table class="table table-condensed table-bordered" width=100% >' + 
 
     '<thead>' + 
 
     '<tr>' + 
 
     '<th>Surname</th>' + 
 
     '<th >FirstName</th>' + 
 
     '<th >School Id</th>' + 
 
     '<th >School name</th>' + 
 
     '</tr>' + 
 
     '</thead>' + 
 
     '<tbody>'; 
 

 
    $.ajax({ 
 
     url: '/echo/json/', 
 
     dataType: "json", 
 
     data: parentsData, 
 
     success: function(parentsData) { 
 
     if (parentsData.parents) { 
 
      var parents = parentsData.parents; 
 
      $.each(parents, function(i, parent) { 
 
      newRow = newRow + '<tr scope="row">' + 
 
       '<td>' + parent.Firstname + '</td>' + 
 
       '<td>' + parent.Surname + '</td>' + 
 
       '<td>' + parent.schoolId + '</td>' + 
 
       '<td>' + parent.schoolName + ' ' + parent.commune + 
 
       '</td>' + 
 
       '</tr>'; 
 
      }); 
 
      newRow = newRow + '</tbody></table></td></tr>'; 
 
     } 
 
     $(newRow).insertAfter($this); 
 
     } 
 
    }); 
 
    } else { 
 
    $(this).closest('tr').slideToggle(); 
 
    var $detailRow = $(this).closest('tr').next('tr').hasClass('expand-child'); 
 
    $detailRow.style.visibility.toggle('table-row collapse'); 
 
    $(e.target).toggleClass('glyphicon-eye-close glyphicon-eye-open'); 
 
    } 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<container> 
 
    <table class="table table-striped table-hover js-table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Training</th> 
 
     <th>Title</th> 
 
     <th>Date</th> 
 
     <th>End date</th> 
 
     <th>Description</th> 
 
     <th>nb of Applicants</th> 
 
     <th>Actions</th> 
 
     </tr> 
 
    </thead> 
 
    <tr data-toggle="collapse" data-target="#collapse4039" class="clickable"> 
 
     <td>Activités nautiques</td> 
 
     <td>Activités nautiques - 16/10/2016</td> 
 
     <td>16/oct./2016</td> 
 
     <td>13/oct./2016</td> 
 
     <td>Sequelae of viral hepatitis</td> 
 
     <td>15</td> 
 
     <td> 
 
     <div class="btn-group btn-group-sm" role="group" aria-label="..."> 
 
      <div class="btn-group " role="group" aria-label="Voir le detail"> 
 
      <a href="#" class="parents js-view-parents" data-href="formation_json_parents" data-id=4039 data-toggle="tooltip" data-placement="top" alt="Voir les details" title="Voir les inscrits"> 
 
       <span class="glyphicon glyphicon-eye-close" aria-hidden="true" style="color:black; margin: 5px;"></span> 
 
      </a> 
 
      </div> 
 

 
      <div class="btn-group " role="group" aria-label="Valider les candidats"> 
 
      <a href="valider" data-href='' alt="Valider les candidats" data-toggle="tooltip" data-placement="right" title="Valider les candidats"> 
 
       <span class="glyphicon glyphicon-check" aria-hidden="true" style="color:black; margin: 5px;"></span> 
 
      </a> 
 
      </div> 
 
      <div class="btn-group " role="group" aria-label="Imprimer la liste d'emargement pour cette formation"> 
 
      <a href="/edsa-AgrementEPS/app_dev.php/formation/4039/liste?print=pdf" data-href="" alt="Download PDF list of applicants" data-toggle="tooltip" data-placement="right" name="Activités nautiques - 16/10/2016" title="Download PDF list of applicants"> 
 
       <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="color:black; margin: 5px;"></span> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr data-toggle="collapse" data-target="#collapse4095" class="clickable"> 
 
     <td>Activités nautiques</td> 
 
     <td> Activités nautiques - 24/10/2016</td> 
 
     <td>24/oct./2016</td> 
 
     <td>21/oct./2016</td> 
 
     <td>Severe pre-eclampsia, third trimester</td> 
 
     <td>0</td> 
 
     <td> 
 
     <div class="btn-group btn-group-sm" role="group" aria-label="..."> 
 
      <div class="btn-group hidden" role="group" aria-label="Voir le detail"> 
 
      <a href="#" class="parents js-view-parents" data-href="formation_json_parents" data-id=4095 data-toggle="tooltip" data-placement="top" alt="Voir les details" title="Voir les inscrits"> 
 
       <span class="glyphicon " aria-hidden="true" style="color:black; margin: 5px;"></span> 
 
      </a> 
 
      </div> 
 

 
      <div class="btn-group hidden" role="group" aria-label="Valider les candidats"> 
 
      <a href="/valider" data-href='' alt="Valider les candidats" data-toggle="tooltip" data-placement="right" title="Valider les candidats"> 
 
       <span class="glyphicon glyphicon-check" aria-hidden="true" style="color:black; margin: 5px;"></span> 
 
      </a> 
 
      </div> 
 
      <div class="btn-group hidden" role="group" aria-label="Imprimer la liste d'emargement pour cette formation"> 
 
      <a href="/print=pdf" data-href="" alt="Download PDF list of applicants" data-toggle="tooltip" data-placement="right" name="Activités nautiques - 24/10/2016" title="Download PDF list of applicants"> 
 
       <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="color:black; margin: 5px;"></span> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr data-toggle="collapse" data-target="#collapse3188" class="clickable"> 
 
     <td>Activités nautiques</td> 
 
     <td>Activités nautiques - 29/10/2016</td> 
 
     <td>29/oct./2016</td> 
 
     <td>26/oct./2016</td> 
 
     <td>Other secondary chronic gout</td> 
 
     <td>0</td> 
 
     <td> 
 
     <div class="btn-group btn-group-sm" role="group" aria-label="..."> 
 
      <div class="btn-group " role="group" aria-label="Voir le detail"> 
 
      <a href="#" class="parents js-view-parents" data-href="formation_json_parents" data-id=4039 data-toggle="tooltip" data-placement="top" alt="Voir les details" title="Voir les inscrits"> 
 
       <span class="glyphicon glyphicon-eye-close" aria-hidden="true" style="color:black; margin: 5px;"></span> 
 
      </a> 
 
      </div> 
 

 
      <div class="btn-group " role="group" aria-label="Valider les candidats"> 
 
      <a href="valider" data-href='' alt="Valider les candidats" data-toggle="tooltip" data-placement="right" title="Valider les candidats"> 
 
       <span class="glyphicon glyphicon-check" aria-hidden="true" style="color:black; margin: 5px;"></span> 
 
      </a> 
 
      </div> 
 
      <div class="btn-group " role="group" aria-label="Imprimer la liste d'emargement pour cette formation"> 
 
      <a href="/liste?print=pdf" data-href="" alt="Download PDF list of applicants" data-toggle="tooltip" data-placement="right" name="Activités nautiques - 16/10/2016" title="Download PDF list of applicants"> 
 
       <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="color:black; margin: 5px;"></span> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 
    </table> 
 
</container>

Answer 1

主な問題は、間違った要素に折りたたむためのIDを付けたことです。これはtr.expand-child要素に添付され、.expand-child td要素には添付されません。

AJAX応答がある場合にのみ、.expand-child行全体を作成します。

また、再利用する要素をキャッシュするのは良い習慣です。ここで

は、私はあなたのコードを修正する方法をです：デモ目的のために

var $table = $('.js-table'); 

$table.find('.js-view-parents').on('click', function(e) { 
    e.preventDefault(); 
    // cache elements 
    var $btn = $(e.target), $row = $btn.closest('tr'), 
     // find next immediate .expand-child 
     $nextRow = $row.next('tr.expand-child'); 
    // toggle button 
    $btn.toggleClass('glyphicon-eye-close glyphicon-eye-open'); 
    // if .expand-child row exist already, toggle 
    if ($nextRow.length) { 
     // show or hide .expand-child row if eye button is open or not, respectively 
     $nextRow.toggle($btn.hasClass('glyphicon-eye-open')); 
    // if not, create .expand-child row 
    } else { 
     $.ajax({ 
      url: '/echo/json/', 
      dataType: "json", 
      data: parentsData, 
      success: function (parentsData) { 
       var newRow = '<tr class="expand-child" id="collapse' + $btn.data('id') + '">' + 
        '<td colspan="12">' + 
        '<table class="table table-condensed table-bordered" width=100% >' + 
        '<thead>' + 
        '<tr>' + 
        '<th>Surname</th>' + 
        '<th>FirstName</th>' + 
        '<th>School Id</th>' + 
        '<th>School name</th>' + 
        '</tr>' + 
        '</thead>' + 
        '<tbody>'; 
       if (parentsData.parents) { 
        $.each(parentsData.parents, function(i, parent) { 
         newRow += '<tr>' + 
         '<td>' + parent.Firstname + '</td>' + 
         '<td>' + parent.Surname + '</td>' + 
         '<td>' + parent.schoolId + '</td>' + 
         '<td>' + parent.schoolName + ' ' + parent.commune + '</td>' + 
         '</tr>'; 
        }); 
       } 
       newRow += '</tbody></table></td></tr>'; 
       $row.after(newRow); 
      } 
     }); 
    } 
}); 

Demo

は、私は、AJAX呼び出しをコメントアウトしています。

Answer 2

を見つけることができます。まず、

$(this).closest('tr').slideToggle(); 

は、あなたが欲しいものではありません、あなたの親行を、上にスライドしようとしている - あなたは子行を非表示にします。

var $detailRow = $(this).closest('tr').next('tr').hasClass('expand-child'); 

hasClass()あなたはjQueryのコレクションをフィルタリングするためにそれを使用することはできません、ブール値を返します。あなたがやろうとしていることは、このようなクラス.expand-childを持って次の<tr>を、選択している：

は

var $detailRow = $(this).closest('tr').next('tr.expand-child'); 

次の行は全く意味がありません。

$detailRow.style.visibility.toggle('table-row collapse'); 

私はあなたの代わりに、その行のクラスを切り替えたいと思います：

$detailRow.toggleClass('table-row collapse'); 

これらの変更は、作業を隠す/最初の上映を行います。しかし、同様にあなたのifブロックに問題があります：

$(".expand-child").slideUp(); 

これはDOMでクラス.expand-childですべての要素を選択します。しかし、おそらく、現在の親行の子行だけを選択したいと思うでしょう。 しかし、このコード全体をあなたのためにデバッグするつもりはありません。私は、私が主な問題のいくつかを明確にしたと思う（この更新されたフィドルを参照：https://jsfiddle.net/r7sgL7vy/2/）、あなたはうまくいけばあなた自身からここに進むことができるだろう。

もう1つtipp：パフォーマンスのために、必要なときに毎回クエリを実行するのではなく、変数で複数回使用するjQueryコレクションを格納します。すでに$detailRowと$this = ...でこれを行っていますが、結果として使用されていません。なぜ、クリックイベントハンドラの開始時に必要なすべてのdom要素を選択して宣言してから、どこにでも使用してください。パフォーマンスの要素に加えて、コードをよりクリーンに、理解しやすく（あなたや他の人のために）、そしてあなたのロジックの間違いを見つけやすくします。