jQuery展開テーブルの行

Question

私は、クリックするとより多くのコンテンツを表示する拡張セクションのテーブルを利用できるようにするプラグインを使用しています。

プラグインが機能している間、私はコードの一部を微調整しようとしており、それを正しく得ることはできません。

行全体にクリックイベントがあり、行にリンクが含まれている場合はリンクに移動して、望ましくない行を展開します。私は、拡張矢印をクリックするとクリックイベントが発生するようにしたいと思います。

$('.table-expandable').each(function() { 
    var table = $(this); 
    table.children('thead').children('tr').append('<th></th>'); 
    table.children('tbody').children('tr').filter(':odd').hide(); 


    // This is the event that is linked to the whole table row 
    table.children('tbody').children('tr').filter(':even').click(function() { 
     var element = $(this); 
     element.next('tr').toggle('slow'); 
     element.find(".table-expandable-arrow").toggleClass("up"); 
    }); 



    table.children('tbody').children('tr').filter(':even').each(function() { 
     var element = $(this); 
     element.append('<td><div class="table-expandable-arrow"></div></td>'); 
    }); 
}); 

は、私がイベントにロジックの別の部分に追加してみましたが、それは動作しませんでした：私はしようとすることができるものの

table.children('tbody').children('tr').filter(':even').find('.table-expandable-arrow').click(function() { 

任意のアイデアを矢印ができるトリガを代わりに全体の行？

更新：

<tr class="primaryValue "> 
    <td class="small"><a target="_BLANK" href="tool.php?tool=30">30</a></td> 
    <td class="small">Quickload</td> 
    <td class="small">Web</td> 
    <td class="small">John Doe</td> 
    <td class="small"><a href="mailto:john@test.com">john@test.com</a></td> 
    <td class="small">Omaha</td> 
    <td class="small">123456</td> 
    <td class="small">N/A</td> 
    <td> 
     <div class="table-expandable-arrow"></div> 
    </td> 
</tr> 

Answer 1

あなたのコードの問題は、あなたが.table-expandable-arrowを探し、その時点でということである - まだあなたのDOMでそのような要素が存在しない（この要素は、この呼び出しの後でのみ作成されます）。

代わりに、要素を作成するときににclickイベントを添付するようにコードを変更することができます。ここで

は一例です：私もあなたが行全体を置くと、カーソルがpointerに設定されていないことを確認するためにいくつかのCSSの変更を追加したことを

(function ($) { 
 
    $(function() { 
 
     $('.table-expandable').each(function() { 
 
      var table = $(this); 
 
      table.children('thead').children('tr').append('<th></th>'); 
 
      table.children('tbody').children('tr').filter(':odd').hide(); 
 
      table.children('tbody').children('tr').filter(':even').each(function() { 
 
       var element = $(this); 
 
       arrowElement = $('<div class="table-expandable-arrow"></div>') 
 
       arrowElement.on('click', function() { 
 
        $(this).parents('tr').next('tr').toggle('slow'); 
 
        $(this).toggleClass("up"); 
 
       }); 
 
       td = $('<td></td>').append(arrowElement) 
 
       element.append(td); 
 
      }); 
 
     }); 
 
    }); 
 
})(jQuery);

table.table-expandable > tbody > tr:nth-child(odd) { 
 
    cursor: auto !important; 
 
} 
 
.table-expandable-arrow { 
 
    cursor: pointer; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
 
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Expandable-Bootstrap-Table-Rows/css/bootstrap-table-expandable.css"> 
 
<div class="container"> 
 
    <h1 style="margin-top:150px;">jQuery Bootstrap Table Expandable Demo</h1> 
 
    <table class="table table-hover table-expandable table-striped"> 
 
    <thead> 
 
     <tr> 
 
     <th>Country</th> 
 
     <th>Population</th> 
 
     <th>Area</th> 
 
     <th>Official languages</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>United States of America</td> 
 
     <td>306,939,000</td> 
 
     <td>9,826,630 km2</td> 
 
     <td>English</td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5"><h4>Additional information</h4> 
 
      <ul> 
 
      <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li> 
 
      <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li> 
 
      <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li> 
 
      </ul></td> 
 
     </tr> 
 
     <tr> 
 
     <td>United Kingdom </td> 
 
     <td>61,612,300</td> 
 
     <td>244,820 km2</td> 
 
     <td>English</td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5"><h4>Additional information</h4> 
 
      <ul> 
 
      <li><a href="http://en.wikipedia.org/wiki/United_kingdom">UK on Wikipedia</a></li> 
 
      <li><a href="http://www.visitbritain.com/">Official tourist guide to Britain</a></li> 
 
      <li><a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703">Official Yearbook of the United Kingdom</a></li> 
 
      </ul></td> 
 
     </tr> 
 
     <tr> 
 
     <td>India</td> 
 
     <td>1,147,995,904</td> 
 
     <td>3,287,240 km2</td> 
 
     <td>Hindi, English</td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5"><h4>Additional information</h4> 
 
      <ul> 
 
      <li><a href="http://en.wikipedia.org/wiki/India">India on Wikipedia</a></li> 
 
      <li><a href="http://india.gov.in/">Government of India</a></li> 
 
      <li><a href="http://wikitravel.org/en/India">India travel guide</a></li> 
 
      </ul></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Canada</td> 
 
     <td>33,718,000</td> 
 
     <td>9,984,670 km2</td> 
 
     <td>English, French</td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5"><h4>Additional information</h4> 
 
      <ul> 
 
      <li><a href="http://en.wikipedia.org/wiki/Canada">Canada on Wikipedia</a></li> 
 
      <li><a href="http://atlas.gc.ca/site/index.html" >Official 
 
       Government of Canada online Atlas of Canada</a></li> 
 
      <li><a href="http://wikitravel.org/en/Canada">Canada travel guide</a></li> 
 
      </ul></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Germany</td> 
 
     <td>82,060,000</td> 
 
     <td>357,021 km2</td> 
 
     <td>German</td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5"><h4>Additional information</h4> 
 
      <ul> 
 
      <li><a href="http://en.wikipedia.org/wiki/Germany">Germany on Wikipedia</a></li> 
 
      <li><a href="http://www.deutschland.de/home.php?lang=2">Deutschland.de Official Germany portal</a></li> 
 
      <li><a href="http://www.cometogermany.com/">Germany Travel Info</a></li> 
 
      </ul></td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

は注意が、矢印の上にだけ。