Jquery Clone Table Row

by Avinashullal

HTML

<table id="tblData" class="mGrid">
    <tr>
        <th>GL Account</th>
        <th>Year</th>
        <th>Description</th>
        <th>Line Total</th>
        <th>Line Tax</th>
        <th>Line Total With Tax</th>
    </tr>
    <tr>
        <td>
            <select id="ddGL_Account">
                <option value="szt">ASGX53427</option>
                <option value="szt">ASGX53427</option>
                <option value="szt">ASGX53427</option>
                <option value="szt">ASGX53427</option>
                <option value="szt">ASGX53427</option>
            </select>
        </td>
        <td>
            <select id="ddYear">
                <option value="szt">2014</option>
                <option value="szt">2013</option>
                <option value="szt">2012</option>
                <option value="szt">2011</option>
                <option value="szt">2010</option>
            </select>
        </td>
        <td>
            <input id="desc" type="text" size="10" name="to" />
        </td>
        <td>
            <input id="total" type="text" size="5" name="to" />
        </td>
        <td>
            <input id="linetax" type="text" size="8" name="to" />
        </td>
        <td>
            <input type="text" size="8" name="to" />
        </td>
    </tr>
</table>
<br />
<button id="btnAdd">Add</button>

CSS

.mGrid {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}
.mGrid tr th, .mGrid tr td {
    border: 1px solid #ddd;
}
.mGrid tr th {
    background-color: #5ea8de;
    color: #fff;
    border-color: #ddd;
    font-weight: 300;
    text-align: center;
}
.mGrid tr th a {
    color: #FFEBE1;
}
.mGrid .alt {
    background-color: #F5F5F5;
}

JavaScript

/* <![CDATA[ */
$(document).ready(function () {

    $('#btnAdd').click(function () {

        var $parentTR = $('#tblData  tr:last').closest('tr');
        $parentTR.clone(true).find('input').val('').end().insertAfter($parentTR);

    });
});
/* ]]> */