Display JSON data in HTML Table using jQuery AJAX in ASP.Net

Last Reply 5 months ago By dharmendr

Posted 5 months ago

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>
You are viewing reply posted by: dharmendr 5 months ago.