Merge pull request #3 from micc83/v0.1.1

V0.1.1

bower.json

@@ -0,0 +1,20 @@
+{
+    "name": "ReStable",
+    "version": "0.1.1",
+    "description": "jQuery plugin that make tables responsive",
+    "keywords": [
+        "table",
+        "responsive"
+    ],
+    "main": [
+        "jquery.restable.min.js",
+        "jquery.restable.min.css"
+    ],
+    "ignore": [
+      "demo"
+    ],
+    "dependencies": {
+        "jquery": ">=1.6.4"
+    },
+    "license": "MIT"
+}

demo/index.html

@@ -22,7 +22,7 @@
 
 		<div class="container">
 
-			<h1>jQuery ReStable <span>v0.1.0</span></h1>
+			<h1>jQuery ReStable <span>v0.1.1</span></h1>
 
 			<p><strong>jQuery ReStable</strong> is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.</p>
 
@@ -90,10 +90,10 @@ <h2>Some examples</h2>
 	        <table id="table1">
 	            <thead>
 	                <tr>
-	                    <td>Period</td>
-	                    <td>Full Board</td>
-	                    <td>Half Board</td>
-	                    <td>Bed and Breakfast</td>
+	                    <th>Period</th>
+	                    <th>Full Board</th>
+	                    <th>Half Board</th>
+	                    <th>Bed and Breakfast</th>
 	                </tr>
 	            </thead>
 	            <tbody>

demo/main.css

@@ -13,7 +13,7 @@ pre {background-color: #fafafa;padding: 20px;overflow: auto;border: 1px solid #f
 .download_button:hover {background-color: #eaeaea;}
 
 table {width: 100%;text-align: center;border: 0;border-collapse: collapse;border-spacing: 0;font-size: 14px;}
-table td {padding: 10px;margin: 0;}
+table td, table th {padding: 10px;margin: 0;}
 table thead {background-color: #bbb;color: #fff;font-weight: 800;}
 table tbody tr td{border-bottom: 1px solid #eee;}
 table tbody tr:hover td{background-color: #eee;}

jquery.restable.js

@@ -1,6 +1,8 @@
-/*! ReStable v0.1 by Alessandro Benoit */
+/*! ReStable v0.1.1 by Alessandro Benoit */
 (function ($, window, i) {
 
+    'use strict';
+
     $.fn.ReStable = function (options) {
 
         // Settings
@@ -14,7 +16,7 @@
 
             var $cols = [],
                 $result = {},
-                $cols_header = $(element).find('tr').first().children('td'),
+                $cols_header = $(element).find('tr').first().children('td,th'),
                 $row_number = 0,
                 $list;
 
@@ -31,41 +33,38 @@
             $(element).find('tr').slice(1).each(function () {
 
                 var $row = $(this);
-                $row_number++;
+                $row_number += 1;
 
                 $.each($cols, function (index, value) {
 
-                    index++;
+                    index += 1;
 
                     if (s.rowHeaders) {
-                    	if (!$result[value]) { $result[value] = {}; }
+                        if (!$result[value]) { $result[value] = {}; }
                         $result[value][$row.children('td:nth-child(1)').text()] = $row.children('td:nth-child(' + (index + 1) + ')').text();
                     } else {
-                    	if (!$result[$row_number]) { $result[$row_number] = {}; }
+                        if (!$result[$row_number]) { $result[$row_number] = {}; }
                         $result[$row_number][value] = $row.children('td:nth-child(' + index + ')').text();
                     }
 
                 });
 
             });
-
-            console.log($result);
 
             // Crea la lista
             $list = $('<ul/>', {
                 class: 'tabletolist ' + ((s.rowHeaders) ? 'rh' : 'nrh'),
                 id: 'tabletolist' + i
             }).insertBefore($(element));
             $.each($result, function (index, value) {
-
-                var $myrow = $('<li/>', {
-                    html: (s.rowHeaders)? '<span class="titles">' + index + '</span>' : ''
-                }).appendTo($list);
 
-                var $myrowul = $('<ul/>').appendTo($myrow);
+                var $myrow = $('<li/>', {
+                    html: (s.rowHeaders) ? '<span class="titles">' + index + '</span>' : ''
+                }).appendTo($list),
+                    $myrowul = $('<ul/>').appendTo($myrow);
 
                 $.each(value, function (index, value) {
-					
+
                     $('<li/>', {
                         html: '<span class="row_headers">' + index + '</span> <span class="row_data">' + value + '</span>'
                     }).appendTo($myrowul);
@@ -84,12 +83,12 @@
             var element = $(this),
                 responsive_table;
 
-            i++;
+            i += 1;
 
             // The responsive menu is built if the page size is or goes under maxWidth
             function handle_table() {
 
-                if ($(window).width() > parseInt(s.maxWidth)) {
+                if ($(window).width() > parseInt(s.maxWidth, 10)) {
 
                     $(element).show();