├── style.css ├── table_to_div.html ├── jquery.table_to_div.js └── README.rdoc /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial; 3 | font-size: .8em; 4 | } 5 | .my_div_group{ 6 | float:left; 7 | width:400px; 8 | margin:15px; 9 | padding:15px; 10 | -webkit-border-radius: 10px; 11 | border-radius: 10px; 12 | box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.79); 13 | -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.79); 14 | -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.79); 15 | } 16 | .my_div_row label{ 17 | width: 100px; 18 | display:block; 19 | float:left; 20 | font-weight: bold; 21 | } 22 | .my_div_row span{ 23 | width: 250px; 24 | display:block; 25 | float:left; 26 | } 27 | .my_div_row{ 28 | height:25px; 29 | } -------------------------------------------------------------------------------- /table_to_div.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
First NameLast NameCompanyImage PathAddressAddress 2CityStateZip
RyanDoomWeb Ascender/whatever/something.jpg4151 Okemos RdSTE BOkemosMichigan48864
JohnDoeWeb Ascender/images/whatever.jpg4151 Okemes Road.STE B.OkemosMI48864
53 | 54 | -------------------------------------------------------------------------------- /jquery.table_to_div.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $.fn.table_to_div = function(options) { 3 | var settings = $.extend({}, {prefix: 'tg',target:''}, options); 4 | return this.each(function() { 5 | var output = ""; 6 | var data = ""; 7 | settings.prefix = settings.prefix+"_"; 8 | columns = []; 9 | table_target = $(this); 10 | var tr_count=0; 11 | //LOOP OVER ALL ROWS 12 | $(table_target).find('tr').each(function(){ 13 | var col_count = 0; 14 | //LOW OVER EACH COLUMN IN THE ROW 15 | $(this).find('th,td').each(function(){ 16 | var element = $(this).html(); 17 | if(tr_count ==0){ 18 | //HEADER COLUMN 19 | columns.push($(this).html()); 20 | }else{ 21 | //CONTENT COLUMN, strip leading and trailing whitespace 22 | data+= '
\n'; 23 | data+= ' \n'; 24 | data+= ' '+element.replace(/^\s\s*/, '').replace(/\s\s*$/, '')+'\n'; 25 | data+= '
\n'; 26 | } 27 | col_count++; 28 | }); 29 | if(tr_count != 0){ 30 | output+='
\n'; 31 | output+= data; 32 | output+= '
\n'; 33 | data = ""; 34 | } 35 | tr_count++; 36 | }); 37 | output = '
\n'+output+'
\n'; 38 | if(settings.target.length > 0){ 39 | $(settings.target).html(output); 40 | }else{ 41 | $(table_target).before(output); 42 | } 43 | }); 44 | }; 45 | })(jQuery); 46 | -------------------------------------------------------------------------------- /README.rdoc: -------------------------------------------------------------------------------- 1 | == Jquery plugin to convert tabular data into divs 2 | 3 | This plugin was developed to convert tabular output into divs for more control of style and layout. In a popular CMS we use it's easy to write custom SQL to pull data out of the database and render it in a table. It's a lot more work to try and query that data and then output that data in a more usable format that can be styled. 4 | 5 | This is a quick little way to just convert the table. 6 | 7 | === JavaScript Usage 8 | Select the table you want to convert 9 | 10 | .table_to_div() takes two optional arguments. 11 | 12 | prefix: which will prefix your divs with something you select, or if you leave it empty it will prefix everything with tg 13 | 14 | target: if you specify a target it will add the div conversion into that target element. This would most likely be an id or class for another div on the page. 15 | 16 | If left empty the divs will be added before your table. 17 | 18 | 25 | 26 | 27 | === Example Target HTML 28 | 29 | Example here has mixed th / td in the header row to support both syntax. 30 | Currently designed where the leading row is always a header row. 31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
First NameLast NameCompanyImage PathAddressAddress 2CityStateZip
RyanDoomWeb Ascender/whatever/something.jpg4151 Okemos RdSTE BOkemosMichigan48864
JohnDoeWeb Ascender/images/whatever.jpg4151 Okemes Road.STE B.OkemosMI48864
69 | 70 | === Example Output 71 | 72 | Conversion of the above table. Right now it removes the spaces out of the heading rows, but a future change may be to remove any invalid characters for a class element. 73 | 74 |
75 |
76 |
77 | 78 | Ryan 79 |
80 |
81 | 82 | Doom 83 |
84 |
85 | 86 | Web Ascender 87 |
88 |
89 | 90 | /whatever/something.jpg 91 |
92 |
93 | 94 | 4151 Okemos Rd 95 |
96 |
97 | 98 | STE B 99 |
100 |
101 | 102 | Okemos 103 |
104 |
105 | 106 | Michigan 107 |
108 |
109 | 110 | 48864 111 |
112 |
113 |
114 |
115 | 116 | John 117 |
118 |
119 | 120 | Doe 121 |
122 |
123 | 124 | Web Ascender 125 |
126 |
127 | 128 | /images/whatever.jpg 129 |
130 |
131 | 132 | 4151 Okemes Road. 133 |
134 |
135 | 136 | STE B. 137 |
138 |
139 | 140 | Okemos 141 |
142 |
143 | 144 | MI 145 |
146 |
147 | 148 | 48864 149 |
150 |
151 |
152 | 153 | === Common Usage 154 | 155 | * Convert tabular data into div tags 156 | * Transform a table into div 157 | * Javascript to convert a table to div tags 158 | * jQuery to convert table to div or span tags --------------------------------------------------------------------------------