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事件附加到arrow。

下面是一個例子：

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

請注意，我還添加了一些CSS改變，以確保當你將鼠標懸停在整個行光標未設置爲pointer，但只在箭頭上。