Q_28574448

by Subramanian Gomathinathan

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<br/>
<table id="tbl1" border="1" width="100%">
    <thead>
        <tr>
            <th colspan="12">Expenses</th>
            <th colspan="2" nowrap>Add:
                <select id="addFor">
                    <option value=""></option>
                    <option value="Borrower">Borrower</option>
                    <option value="Co-Borrower">Co-Borrower</option>
                    <option value="Both">Both</option>
                </select>
            </th>
        </tr>
        <tr>
            <td colspan="14">
                <table id="tbl2" border="1" width="100%">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Owner</th>
                            <th>colx</th>
                            <th>coly</th>
                            <th>colz</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </td>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th colspan="10">total:</th>
        </tr>
        <tr>
            <th colspan="10">...</th>
        </tr>
        <tr>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
            <th width="8%">&nbsp;</th>
        </tr>
    </tfoot>
</table>

CSS

#tbl2 thead {
    display: none;
}
#tbl2>tbody>tr:nth-child(odd) {
    display: none;
}

JavaScript

var tbl2;

function format(d) {
    console.log(d);
    return $(
        '<div><table border="1" width="100%"><tbody>' +
        '<tr>' +
        '<td rowspan="2">&nbsp;</td>' +
        '<td>Type:</td>' +
        '<td rowspan="2">' + d[0] + '</td>' +
        '<td>Owner:</td>' +
        '<td>' + d[1] + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Paid To:</td>' +
        '<td>' + d[2] + '</td>' +
        '<td>' + d[3] + '</td>' +
        '</tr>' +
        '</tbody></table></div>').html();
}
$(function () {
    tbl2 = $('#tbl2').DataTable();
    $('#addFor').change(function () {
        var row = tbl2.row.add(['', $('#addFor').val(), 'x', 'y', 'z']);
        row.child(format(row.data())).show();
        tbl2.draw();
        $('#addFor').val('');
    });
});