i want to set json data in html table using javascript according to this design.
<div id="BomExpansiontablediv">
<table id="tblBomExpansion" class="table table-striped table-bordered table-condensed FinalFont FinalFormContrlFontSize" cellpadding="0" style="font-family:Arial;font-size:11.5px;border:1px solid #bfbfbf;">
<thead id="theadBomExpansion">
<tr>
<th></th>
<th style="text-align: center;" colspan="3">FLAVASEAL ORANGE FLV 2100 500GM</th>
<th style="text-align: center;" colspan="3">FLAVASEAL ORANGE FLV 6101 1KG</th>
<th></th>
<th></th>
</tr>
<tr>
<th>Item Name</th>
<th style="text-align: center;">Qty</th>
<th style="text-align: center;">Amt</th>
<th style="text-align: center;">Select</th>
<th style="text-align: center;">Qty</th>
<th style="text-align: center;">Amt</th>
<th style="text-align: center;">Select</th>
<th style="text-align: right;">New Qty</th>
<th style="text-align: right;">New Amt</th>
</tr>
</thead>
<tbody id="tbodyBomExpansion">
<tr>
<td>1KG JAR</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td style="text-align: center;">0.25</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" checked="checked"/></td>
<td><input type="text" style="width:100%;text-align: right;" value="0.25"></td>
<td><input type="text" style="width:100%;text-align: right;" value="0"></td>
</tr>
<tr>
<td>1KG PLASTIC BAG</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" checked="checked"/></td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td><input type="text" style="width:100%;text-align: right;" value="1"></td>
<td><input type="text" style="width:100%;text-align: right;" value="0"></td>
</tr>
<tr>
<td>FLAVASEAL ORANGE FLV 6101 LOOSE</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td style="text-align: center;">0.5</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" checked="checked"/></td>
<td><input type="text" style="width:100%;text-align: right;" value="0.5"></td>
<td><input type="text" style="width:100%;text-align: right;" value="0"></td>
</tr>
<tr>
<td>LABEL FLAVASEAL (1,5,20KG)</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" checked="checked"/></td>
<td><input type="text" style="width:100%;text-align: right;" value="2"></td>
<td><input type="text" style="width:100%;text-align: right;" value="0"></td>
</tr>
<tr>
<td>SEAL FOR PROTECTION</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" checked="checked"/></td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td><input type="text" style="width:100%;text-align: right;" value="1"></td>
<td><input type="text" style="width:100%;text-align: right;" value="0"></td>
</tr>
<tr>
<td>SMALL CABLE TIE</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td><input type="text" style="width:100%;text-align: right;" value="0"></td>
<td><input type="text" style="width:100%;text-align: right;" value="0"></td>
</tr>
<tr>
<td>FLAVASEAL ORANGE FLV 2100 LOOSE</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td style="text-align: center;">0.5</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" checked="checked"/></td>
<td><input type="text" style="width:100%;text-align: right;" value="0.5"></td>
<td><input type="text" style="width:100%;text-align: right;" value="0"></td>
</tr>
<tr>
<td>POUCH</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td><input type="text" style="width:100%;text-align: right;"></td>
<td><input type="text" style="width:100%;text-align: right;"></td>
</tr>
<tr>
<td>LABEL FLAVASEAL (0.5GM)</td>
<td style="text-align: center;">0.5</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" checked="checked"/></td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;"><input type="checkbox" /></td>
<td><input type="text" style="width:100%;text-align: right;" value="0.5"></td>
<td><input type="text" style="width:100%;text-align: right;" value="0"></td>
</tr>
</tbody>
<tfoot id="thfootBomExpansion">
<tr>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;font-weight:bold">Total</td>
<td style="text-align: right;font-weight:bold;padding-right: 3px;">5.75</td>
<td style="text-align: right;font-weight:bold;padding-right: 3px;">0</td>
</tr>
</tfoot>
</table>
</div>
