JSFiddle - React, Tailwind, and code Playground

by Lakshmana Kumar C

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.3/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<body>
    <div>
        Enter No. Rows
        <input type="text" id="txtQuoteNo" value="5" />
        <input type="button" value="Create Rows" onclick="CreateQuoteSent()" />
    </div>
    <div>
        <table id="tblQuotesSent" class="tableStyle" cellpadding="0" cellspacing="0" width="100%" border="0">
            <thead>
                <tr class="tab_head">
                    <th>
                        Q ID
                    </th>
                    <th>
                        Offer No
                    </th>
                    <th>
                        Customer Name
                    </th>
                    <th>
                        Contact No
                    </th>
                    <th>
                        Total Sq.Ft
                    </th>
                    <th>
                        Value / Sq.Ft
                    </th>
                    <th>
                        Total Value
                    </th>
                    <th>
                        Fab
                    </th>
                    <th>
                        Ins
                    </th>
                    <th>
                        Tpt
                    </th>
                    <th>
                        Glass
                    </th>
                    <th>
                        Other Commission
                    </th>
                    <th>
                        Dealer Commission
                    </th>
                    <th>
                        Dealer Name
                    </th>
                    <th>
                        Executive Name
                    </th>
                </tr>
            </thead>
            <tbody id="tbodyQuotesSent">
            </tbody>
        </table>
   ...

JavaScript

$(document).ready(function() {
            CreateQuoteSent();
        });

        function CreateQuoteSent() {

            var count = parseInt($('#txtQuoteNo').val());

            $('#tbodyQuotesSent').empty();
            $('#tblQuotesSent').dataTable().fnClearTable();

            var StringHTML = '';
            for (var key = 0; key < count; key++) {
                StringHTML += '<tr>' +
                    '<td>' + key + '</td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td>' +
                    '<td> <input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td>' +
                    '<td> <input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td>' +
                    '<td> <input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td>' +
                    '</tr>';
            }

            $("#tbodyQuotesSent").html(StringHTML);

            var oTable = $('#tblQuotesSent').dataTable({
                "sScrollY": "400px",
                "bSort": false,
                "bDestroy": true,
                "sScrollX": "100%",
                "sScrollXInner": "150%",
                "bPaginate": false,
                "bScrollCollapse": true
            });

            new FixedColumns(oTable, {
                "iLeftColumns": 2
            });

        }



/*
 * File:        FixedColumns.min.js
 * Version:     2.0.3
 * Author:      Allan Jardine (www.sprymedia.co.uk)
 * 
 * Copyright 2010-2010 Allan Jardine, all rights reserved.
 *
 * This source file is free software, under either the GPL v2 license or a
 * BSD style license, available at:
 *   http://datatables.net/license_gpl2
 *   http://datatables.net/license_bsd
 * 
 * This source file is distributed in the hope that it will be useful, but 
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY...