CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
whitenoisedb
whitenoisedb

Reputation: 403

Collapse rows inside a row in a table

I have a table with several rows. When I click on a plus sign it should collapse new rows from that clicked row.

The problem is that those new rows are fetched by AJAX and need a "row container" to be appended to. How can I insert rows inside a row?

enter image description here

I can't just do this,

<tr class="builds">
  <tr>
    <td colspan="3">build1 product</td>
    <td>build1 events</td>
    <td>build1 actions</td>
  </tr>
  <tr>
    <td colspan="3">build2 product</td>
    <td>build2 events</td>
    <td>build2 actions</td>
  </tr>
<tr>

EDIT: Just to clarify. The main table is populated by AJAX, and when a row is clicked (and contains data) it should collapse rows below that clicked row. This is my main structure:

<div id="products" class="row">
  <div class="col-lg-12">
    <div class="table-responsive">
      <table class="table table-bordered table-hover table-striped tablesorter">
        <thead>
          <tr>
            <th>Product <i class="fa fa-sort"></i></th>
            <th>Customer <i class="fa fa-sort"></i></th>
            <th>API_KEY<i class="fa fa-sort"></i></th>
            <th># Events <i class="fa fa-sort"></i></th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody id="products-container"></tbody>
      </table>
    </div>
    <a href="#" class="more">+ More</a>
  </div>
</div>

Upvotes: 0

Views: 1604

Answers (1)

Petros Kyriakou
Petros Kyriakou

Reputation: 5343

In general you can use jquery like this

normally you put the above code in your ajax request

$.ajax({ options }).done(function (data) {
   $.each(data,function(){
      $('parent row tag id').after('<tr><td>ajax content</td></tr>');
   });   
}

note that this code might need some altering but you should get the idea.

Upvotes: 1

Related Questions