JQuery DataTable

Set the altRows property of the jqxDataTable. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="table"></div>
    <div style="visibility: hidden;" id="dialog">
        <div>Edit Dialog</div>
        <div style="overflow: hidden;">
            <table style="table-layout: fixed; border-style: none;">
                <tr>
                    <td align="right">Order ID:
                    </td>
                    <td align="left">
                        <input id="orderID" type="text" readonly="true" disabled="disabled" />
                    </td>
                </tr>
                <tr>
                    <td align="right">Freight:
                    </td>
                    <td align="left">
                        <div id="freight"></div>
                    </td>
                </tr>
                <tr>
                    <td align="right">Ship Country:
                    </td>
                    <td align="left">
                        <input id="shipCountry" />
                    </td>
                </tr>
                <tr>
                    <td align="right">Shipped Date:</td>
                    <td align="left">
                        <div id="shipDate"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                         <br />
                         <button id="save">Save</button> <button style="margin-left: 5px;" id="cancel">Cancel</button></td>                    
                   </tr>
            </table>
        </div>
    </div>

JavaScript

var orderdetailsurl = "https://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/orderdetails.xml";
            var ordersSource =
            {
                dataFields: [
                    { name: 'OrderID', type: 'int' },
                    { name: 'Freight', type: 'float' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                dataType: "xml",
                id: 'OrderID',
                url: orderdetailsurl,
                addRow: function (rowID, rowData, position, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                },
                updateRow: function (rowID, rowData, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                },
                deleteRow: function (rowID, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
            ...