JqueryでhtmlテーブルをJsonに変換します。

Question

私は、各trがクラスを持つテーブルを持っています。私はそれをサーバー側で使用できるようにJsonに変換したいと考えています。 テーブル内容は以下の通りである：

<table class="tableContent"> 
<thead> 
    <tr class="header"> 
     <th class="col1">RoleName</th> 
     <th class="col2">ReadOnly</th> 
     <th class="col3">Modify</th>   
     <th class="col4">Approve</th> 
    </tr> 
</thead> 
<tbody> 
    <tr class="1"> 
     <td>RoleA</td> 
     <td><input type="checkbox" class="readOnly"></td> 
     <td><input type="checkbox" class="modify" checked></td> 
     <td><input type="checkbox" class="approve"></td>   
    </tr> 
    <tr class="1"> 
     <td>RoleB</td> 
     <td><input type="checkbox" class="readOnly"></td> 
     <td><input type="checkbox" class="modify" checked></td> 
     <td><input type="checkbox" class="approve"></td>   
    </tr> 
    <tr class="2"> 
     <td>RoleA</td> 
     <td><input type="checkbox" class="readOnly" checked></td> 
     <td><input type="checkbox" class="modify" checked></td> 
     <td><input type="checkbox" class="approve"></td>   
    </tr> 
    <tr class="2"> 
     <td>RoleB</td> 
     <td><input type="checkbox" class="readOnly" checked></td> 
     <td><input type="checkbox" class="modify" checked></td> 
     <td><input type="checkbox" class="approve" checked></td>   
    </tr> 
</tbody> 
</table> 

私は、JSONはでフォーマットの下になりたい：class属性値がJSONのフィールドIDがここ

[{"id":1, 
"roles":[ 
    { 
    "name": "RoleA", 
    "readOnly": false, 
    "modify": true, 
    "approve": false 
    }, 
    { 
    "name": "RoleB", 
    "readOnly": false, 
    "modify": true, 
    "approve": true 
    } 
]}, 
{"id":2, 
"roles":[ 
    { 
    "name": "RoleA", 
    "readOnly": true, 
    "modify": true, 
    "approve": false 
    }, 
    { 
    "name": "RoleB", 
    "readOnly": true, 
    "modify": true, 
    "approve": true 
    } 
]}] 

とロールは、複数であってもよいですユーザーのために。

解決に役立つガイダンスは大変ありがとうございます。

更新：上記のようなリストを作成するには、余分な列が追加され、Jsonが同じ形式で作成されます。 ワーキングJSフィドル：https://jsfiddle.net/SujitJ/cjk6vu3n/8/

Answer 1

var myRows = []; 
 
var $headers = $("th"); 
 
var $rows = $("tbody tr").each(function(index) { 
 
    $cells = $(this).find("td"); 
 
    myRows[index] = {}; 
 
    $cells.each(function(cellIndex) { 
 
    myRows[index][$($headers[cellIndex]).html()] = $(this).html(); 
 
    });  
 
}); 
 
var myObj = {}; 
 
myObj.myrows = myRows; 
 
alert(JSON.stringify(myObj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tableContent"> 
 
<thead> 
 
    <tr class="header"> 
 
     <th class="col1">RoleName</th> 
 
     <th class="col2">ReadOnly</th> 
 
     <th class="col3">Modify</th>   
 
     <th class="col4">Approve</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr class="1"> 
 
     <td>RoleA</td> 
 
     <td><input type="checkbox" class="readOnly"></td> 
 
     <td><input type="checkbox" class="modify" checked></td> 
 
     <td><input type="checkbox" class="approve"></td>   
 
    </tr> 
 
    <tr class="1"> 
 
     <td>RoleB</td> 
 
     <td><input type="checkbox" class="readOnly"></td> 
 
     <td><input type="checkbox" class="modify" checked></td> 
 
     <td><input type="checkbox" class="approve"></td>   
 
    </tr> 
 
    <tr class="2"> 
 
     <td>RoleA</td> 
 
     <td><input type="checkbox" class="readOnly" checked></td> 
 
     <td><input type="checkbox" class="modify" checked></td> 
 
     <td><input type="checkbox" class="approve"></td>   
 
    </tr> 
 
    <tr class="2"> 
 
     <td>RoleB</td> 
 
     <td><input type="checkbox" class="readOnly" checked></td> 
 
     <td><input type="checkbox" class="modify" checked></td> 
 
     <td><input type="checkbox" class="approve" checked></td>   
 
    </tr> 
 
</tbody> 
 
</table>