Grider

Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features

Can make simple operations defined in the headers
Can add a row count to the table
Adds or deletes rows based on a row
Has summaries for average (avg), sum (sum), maximum (max) and minimum (min)
Works nice with Ruby on rails nested forms

It has been tested with Firefox 3 and Internet Explorer 6 and Google chrome 2, you can configure many fields

  Grider = {
    defaults : {
        initCalc: true, // Tells if it should do the calculations when init
        addRow: true, // Allow adding rows
        addRowWithTab: true, // Allow addign rows with tab when you are focused on the delete Row
        delRow: true, // Allows to delete a row
        decimals: 2, // Decimals used to calculate formulas and summaries
        addRowText: 'Add Row', // Text to add rows
        delRowText: 'delete', // Text for deleting rows
        countRow: false, // Tells to count rows
        countRowCol: 0, // Tells to add the column for counting rows
        countRowText: '#', // The text in the header for the count column
        countRowAdd: false,
        addedRow: false
    }
  }

Try the example below and download this plugin grider.tgz or grider.zip

Example 1

	Product	Price	Quantity	Discount		Subtotal

Convert Table

Code to convert table1

# HTML in the first row where the "th" is located <tr>
<th col="product">Product</th>
<th col="price" summary="max">Price</th>
<th col="quantity" summary="avg">Quantity</th>
<th col="discount">Discount</th>
<th col="subtotal" formula="price*quantity*(1 - 0.10 * discount)" summary="sum">Subtotal</th>
</tr>
# JavaScript
# $('#table1').grider({countRow: true, countRowAdd: true});