convert html table with various kind of condition to Json

Vote count:

0

I am stuck to generate the JSON based on the HTML below

<table>         
    <thead>
        <tr>
            <th>Date</th>
            <th>Rainfall <small>(Milimeter)</small></th>
            <th>Reservoir Level <small>(Meter)</small></th>
            <th>T/Water <small>(Meter)</small></th>
            <th>W/Supply <small>(Cumec)</small></th>
            <th>C/Station <small>(Cumec)</small></th>
            <th>Remarks </th>
            <th>Task</th>
        </tr>
    </thead>                
    <tbody>
        <tr>
            <td>01/06/2014</td>
            <td>120</td>
            <td>120</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td><span class="glyphicon glyphicon-ok"></span></td>
        </tr>
        <tr>
            <td>02/06/2014</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td><span class="glyphicon glyphicon-ok"></span></td>
        </tr>
        <tr>
            <td>03/06/2014</td>
            <td><input type="text" id="44"></td>
            <td><input type="text" id="45"></td>
            <td><input type="text" id="46"></td>
            <td><input type="text" id="47"></td>
            <td><input type="text" id="48"></td>
            <td><input type="text" id="49"></td>
            <td><button class="btn btn-info btn-xs Save">Save</button></td>
        </tr>
        <tr>
            <td>04/06/2014</td>
            <td><input type="text" id="44"></td>
            <td><input type="text" id="45"></td>
            <td><input type="text" id="46"></td>
            <td><input type="text" id="47"></td>
            <td><input type="text" id="48"></td>
            <td><input type="text" id="49"></td>
            <td><button class="btn btn-info btn-xs Save">Save</button></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="9"></td>
        </tr>
    </tfoot>
</table>

As you can see, some cell are blanks, some are mixed with <small>, <span>, and <input>. What I failed to achieve is how to produce the json out of this table in the following format

["Date", "Rainfall (milimeter)", "Reservoir Level (meter)","T/Water (meter)","W/Supply (cumec)","C/Station (cumec)","Remarks","Task"],
["01/06/2014", "120", "120","","","","","OK"],["02/06/2014", "120", "120","","","","","OK"],["03/06/2014", "12", "100","","","","","X"]

From the above format, you can see all values in cell are captured. As for <input> element, I need to pull value of it and append it to json result. Below is what I have right now. So far no luck

buildTableBody = function() {
    var data = [],
        table = $('table', el)[0];
    for (var i=0; i<table.rows.length; i++) { 
        var tableRow = table.rows[i],
            rowData = {};                       
        for (var j=0; j<tableRow.cells.length; j++) {                           
            var rc = tableRow.cells[j].innerHTML.toLowerCase().replace(/ /gi,'');
            if ((rc) || (!_(rc).isBlank())) {
                //console.log(rc);
                var cl = _(_(rc).stripTags()).humanize();
                if (cl == 'task') {
                    rowData[i] = 'Status';
                } else if (cl == 'Save') {
                    rowData[i] = 'X'
                }
            } else {
                rowData[i] = ' ';                               
            }
        }
        data.push(rowData[i]); 
    } 
    //console.log(data);
    return data; 
}

Thank you

asked 52 secs ago

Muhaimin Abdul

75