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，但只在箭头上。