HTML Table => JavaScript Object

HTML Table => JavaScript Object

by Guksels

HTML

<link rel="stylesheet" href="https://dl.dropbox.com/u/34573370/bootstrap/css/bootstrap.css">
<blockquote>Convert this table</blockquote>
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Week 1</th>
            <th scope="col">Week 2</th>
            <th scope="col">Week 3</th>
            <th scope="col">Week 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">Some Data 1 </td>
            <td>33.95%</td>
            <td>11.99%</td>
            <td>1.96%</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td scope="row">Some Data 1 </td>
            <td>40.68%</td>
            <td>16.66%</td>
            <td>0.93%</td>
            <td>1.21%</td>
        </tr>
    </tbody>
</table>

<blockquote>Into the following</blockquote>
    
    
    <pre>

[{
    name: 'Week 1',
    data: [33.95, 40.68]},
{
    name: 'Week 2',
    data: [11.99, 16.66]},
{
    name: 'Week 3',
    data: [1.96, 0.93]},
{
    name: 'Week 4',
    data: [0, 1.21]}];


</pre>

CSS

body { padding: 20px;}
.table { width: 350px;}

JavaScript

var Consolelog = $('table th:not(:nth-child(1))').map(function(i) {

    var $th = $(this);
    var $cel = $('td:nth-child('+(i+2)+')').each(function(){
                       $(this);
                });
    
    
    return {
        name: $th.text(),
        data: $cel.text().split('%').slice(0,-1)
    };
    console.log(return);
    
}).get();

console.log(Consolelog);
//alert(Consolelog.toSource());