Tablify

General classes for Table for styling and scripting purpose. Also extending it so please use it carefully.

by Kushal Jayswal

HTML

<table class="table">
    <tr>
        <th>Table Header 1</th>
        <th>Table Header 2</th>
        <th>Table Header 3</th>
    </tr>
    <tr>
        <td>TD 1.1</th>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
    </tr>
    <tr>
        <td>TD 2.1</th>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
    </tr>
    <tr>
        <td>TD 3.1</th>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
    </tr>
</table>

JavaScript

;(function(){
	    $.fn.tabify = function(options){
	        
	        // required for custom table class increment
	        var tableNo = 1;
	        
	        
	        return this.each(function(){
	        
	            var settings = $.extend({
	                tableClass:     "tabify",
	                tableCounts:    "table_",           //unique class for table
	                trFirstClass:   "first-row",
	                colFirstClass:  "first-col",
	                oddClass:       "odd",
	                evenClass:      "even"
	                
	            }, options);
	            
	            var el = $(this);
	            
	            // default class to Table
	            el.addClass(settings.tableClass);
	            
	            // unique class to Table
	            el.addClass(settings.tableCounts + tableNo);
	            
	            // adding class to very first row of the table - considering as Header
	            el.find("tr:first-child").addClass(settings.trFirstClass);
	            
	            // odd - even rows
	            el.find("tr:odd").addClass(settings.oddClass);
	            el.find("tr:even").addClass(settings.evenClass);
	            
	            // first col
	            el.find("th:first-child").addClass(settings.colFirstClass);
	            el.find("td:first-child").addClass(settings.colFirstClass);
	            
	            el.prepend("<tr><td><button class='addRow'>Add Row</button></td></tr>");
	            
	            el.find(".addRow").click(function() {
	              el.each(function(){
	                var thh = el.find("tr:last-child > td").length;
	                
	                var trr = $("<tr class='newAdded'></tr>");
	                var tdd = new Array();
	                
	                for(var i=1; i<=thh; i++){
	                    if(i == thh){
	                        tdd.push("<td style='position: relative;'>text<button class='delButton' style='position: absolute; right: 0; font-size: 10px;...