Convert HTML table to JSon

Question

In my MVC 3 Razor view i have a table with check-boxes as follows

 <table border="1" id="permiison">
 <thead>
    <tr><th style="width:0px"></th><th>Menu Name</th><th>Add</th> <th>Edit</th><th>Authorize</th><th>View</th></tr>
</thead>
<tbody>
    <tr id="per_tr">
    <td style="width:0px">10</td><td></td><td><input type="checkbox" checked="True" style="width:80px" id="chkAdd"></td><td><input type="checkbox"   checked="True" style="width:80px"></td><td><input type="checkbox" checked="True" style="width:80px"></td> <td><input type="checkbox" style="width:80px" checked="True"></td>
    </tr>

    <tr id="per_tr"><td style="width:0px">11</td><td><span style="width:150px">Group</span></td><td><input type="checkbox" checked="True" style="width:80px" id="chkAdd"></td><td><input type="checkbox" checked="True" style="width:80px"></td><td><input type="checkbox" checked="True" style="width:80px"></td> <td><input type="checkbox" style="width:80px" checked="True"></td>

    </tr>
</tbody>
</table>

I want to convert the table into json with checked values of check boxes. If any body knows please share the methode.

score 3 · Accepted Answer · edited Apr 26 '14 at 10:49

You can do something like:

(function($){
    var getJsonFromTable = function()
        {
            var rows = [];
            $('#permiison tbody tr').each(function(i, n){
                var $row = $(n);
                rows.push({
                    id: $row.find('td:eq(0)').text(),
                    name: $row.find('td:eq(1)').text(),
                    add: $row.find('td:eq(2) input[type=checkbox]').prop('checked'), 
                    edit: $row.find('td:eq(3) input[type=checkbox]').prop('checked'), 
                    authorize: $row.find('td:eq(4) input[type=checkbox]').prop('checked'), 
                    view: $row.find('td:eq(5) input[type=checkbox]').prop('checked'),                                              
                });                
            });
            return JSON.stringify(rows);
        };
    $(function(){        
    console.log(getJsonFromTable ());
    });
})(jQuery);

http://jsfiddle.net/PKFaE/

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Or look into here and do the same for your own situation (its successfully answered question):

convert a HTML table data into a JSON object in jQuery

Good luck and hope this is of help to you.

edited May 23 '17 at 12:20

Community

1
1

answered Aug 14 '12 at 20:16

Display Name

4,676
1
29
43

Convert HTML table to JSon

2 Answers2