How to reveal hidden rows with jquery?

Question

I'm using footable (a jquery script for making tables responsive on mobiles, tablets etc) but i have a problem. Touching-Clicking on expand for every row is kind of unnecessary for my project.

Normally with this code it works:

 <table class="footable">
      <thead>
        <tr>
          <th data-class="expand">
            First Name
          </th>
          <th>
            Last Name
          </th>
          <th data-hide="phone,tablet">
            Job Title
          </th>
          <th data-hide="phone,tablet">
            DOB
          </th>
          <th data-hide="phone">
            Status
          </th>
        </tr>
      </thead>

$(function() { $('table').footable(); });

But How can i expand all rows as default ?

Example code on jsfiddle

Answer 1

Check this DEMO http://jsfiddle.net/yeyene/nZEu2/2/

Add this one line of script $('table tr').addClass('footable-detail-show'); after your footable call

$(document).ready(function(){
    $(function() {
        $('table').footable();
    });
    $('table tr').addClass('footable-detail-show');
}); 

Answer 2

Simply apply the relative classes which is

class="footable-detail-show"
class="footable-row-detail"

EXAMPLE

Answer 3

A simple way to fix your issue would be to add

class="footable-detail-show"

To every TR element you would like to show.

However, agreeing with the comments above, maybe footable isn't needed at all here.

Answer 4

In new footable version use :

$('table tr').addClass('footable-detail-show');
$('.footable-row-detail').css("display","table-row");

Don't forget to rebuild the table with :

$('table').trigger('footable_redraw');