FooTable - jQuery plugin for responsive HTML tables

A demo showing how you can add or remove table rows.
Add New Row Search:

First Name | Last Name | Job Title | DOB | Status |
--- | --- | --- | --- | --- | ---
Isidra | Boudreaux | Traffic Court Referee | 22 Jun 1972 | Active |
Shona | Woldt | Airline Transport Pilot | 3 Oct 1981 | Disabled |
Granville | Leonardo | Business Services Sales Representative | 19 Apr 1969 | Suspended |
Easer | Dragoo | Drywall Stripper | 13 Dec 1977 | Active |
Maple | Halladay | Aviation Tactical Readiness Officer | 30 Dec 1991 | Suspended |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Disabled |
Lorraine | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Disabled |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended |
Judi | Badgett | Electrical Lineworker | 23 Jun 1981 | Active |
Lauri | Hyland | Blackjack Supervisor | 15 Nov 1985 | Suspended |

### Removing A Row

It is recommended to use the built-in `removeRow` function when deleting rows from a FooTable. The reasons are:

- A detail row, that may or may not be generated when a breakpoint is fired, is also deleted
- The correct FooTable events are fired which triggers a redraw. This also forces the sorting, filtering and pagination add-ons to play nicely.

Simply pass the row object into the `removeRow` function. (The row object can be a jQuery object or not)

    $('table').footable().on('click', '.row-delete', function(e) {
        e.preventDefault();
        //get the footable object
        var footable = $('table').data('footable');

        //get the row we are wanting to delete
        var row = $(this).parents('tr:first');

        //delete the row
        footable.removeRow(row);
    });

### Adding A Row

For similar reasons as above, it is recommended to use the built-in `appendRow` function for adding rows to the FooTable:

    $('.add-row').click(function(e) {
        e.preventDefault();

        //get the footable object
        var footable = $('table').data('footable');

        //build up the row we are wanting to add
        var newRow = '<tr><td>Isidra</td><td><a href="#">Boudreaux</a></td><td>Traffic Court Referee</td><td data-value="78025368997">22 Jun 1972</td><td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td><td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td></tr>';

        //add it
        footable.appendRow(newRow);
    });