CODEWITHSUNDEEP
javascriptjquery
SBB
SBB

Reputation: 8990

jQuery expandable table row

I am using a plugin that allows me to utilize tables with an expansion section which will show more content when clicked.

While the plugin is working, I am trying to tweak a piece of code and can't quite get it right.

There is a click event on the whole row and if my row contains a link, its navigating to the link as well as expanding the row which is not desired behavior. I would like to make the click event only happen when clicking the expansion arrow.

  $('.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>');
    });
});

I tried adding in another piece of logic to the event but that didn't work:

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

Any ideas of what I can try to have the arrow be the trigger instead of the whole row?

Update: 

<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:[email protected]">[email protected]</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>

Upvotes: 0

Views: 1204

Answers (1)

Dekel
Dekel

Reputation: 62676

The problem with your code is that by that time that you search for .table-expandable-arrow - there is still no such element in your DOM (this element is created only in the after the this call).

Instead - you can change your code to make sure to attach the click event to the arrow during the creation of the element.

Here is an example:

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

Note that I also added some css changes to make sure the cursor is not set to pointer when you hover the entire row, but only on the arrow.

Upvotes: 1

Related Questions