Easy jQuery Table Manipulation Plugin - table.js

table.js is a powerful jQuery data table plugin for easier table data manipulation that features inline editing, keyboard navigation, data serialization, data formatting, data validation and much more.

Basic usage:

1. Download, unzip the plugin and put the table.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/table.js"></script>

2. Create an empty table element that will be populated with data defined in the JavaScript.

<table id="example"></table>

3. Add initial data into the data table.

var demo = new Table({

    // id of table to attach to
    id: "example",

    // Table header fields, data types and classes
    fields: {
        "Date": {
            "class": "edit",
            "type": "date"
        }, 
        "Meter Read": {
            "class": "edit",
            "type": "int"
        },
        "Used kWh": {
            "type": "calc",
            "formula": [
                { "subtract": [{ "c":-1 }, { "c":-1, "r":-1 }] }
            ]
        },
        "Cost": {
            "class": "edit",
            "type": "money"
        }, 
        "Avg kWh / Day": {
            "type": "calc",
            "formula": [
                { "datediff": [{ "c":-4 }, { "c":-4, "r":-1 }] },
                { "divide": [{ "c":-2 }, { }] }
            ]
        },
        "Avg Cost / Day": {
            "class": "money",
            "type": "calc",
            "formula": [
                { "datediff": [{ "c":-5 }, { "c":-5, "r":-1 }] },
                { "divide": [{ "c":-2 }, { }] }
            ]
        }
    },

    // Table data
    data: [
        ['2014-12-04', '45653', '', '205.26', '', ''],
        ['2015-02-04', '47017', '', '236.81', '', '']
        
    ],

    // Position table rows
    direction: "desc",

    // Enable debug output to console
    debug: true
    
});

4. Render the data into the table element you just created.

demo.render();

5. The required table styles. You can override them yourself by adding your own styles.

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

table td, th {
  text-align: center;
  border: 1px solid #ddd;
  padding: 2px 5px;
  font-size: 16px;
  height: 60px;
}

table th { background-color: #f4f4f4; }

table th.title { }

table tr {
  width: 100%;
  background-color: #fff;
}

table td { text-overflow: ellipsis; }

table td.edit {
  padding: 0px;
  cursor: pointer;
}

td.edit input.editcell {
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  background: white;
  border: 1px solid #DDD;
  border-radius: 5px;
  box-shadow: 0 0 5px #DDD inset;
  color: #666;
  outline: none;
  width: 82%;
  height: 55px;
  line-height: 55px;
  margin: 0px;
  padding: 0px;
}
 td.edit input.editcell::-webkit-input-placeholder { /* WebKit browsers */
 color: #eee;
}
td.edit input.editcell:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color: #eee;
 opacity: 1;
}
td.edit input.editcell::-moz-placeholder { /* Mozilla Firefox 19+ */
 color: #eee;
 opacity: 1;
}
td.edit input.editcell:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: #eee;
}

td.edit input.error { border: 1px solid red; }

table td.money { /*min-width: 330px;*/
}

table td.money:before { content: '$ '; }

table td.remove { width: 30px; }

table td.remove button {
  font-size: 9px;
  font-weight: bold;
  color: red;
  height: 26px;
  width: 26px;
}

6. Add a new row.

demo.addRow();

7. Serialize the table data.

demo.serialize();

---

This awesome jQuery plugin is developed by mikejsutherland. For more Advanced Usages, please check the demo page or visit the official website.