Dynamic Table Row Creation

by VENKATA VINAY BYSANI

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<form class="form-inline" role="form">
    <div class="form-group">
        <label for="email">Description:</label>
        <textarea class="form-control mandatoryCheck" id="description"></textarea>
        <!--<input type="email" class="form-control" id="email"/>--></div>
    <div class="form-group">
        <label for="pwd">From Date:</label>
        <input type="text" class="form-control mandatoryCheck" id="fromDate" />
    </div>
    <div class="form-group">
        <label for="pwd">To Date:</label>
        <input type="text" class="mandatoryCheck form-control" id="toDate" />
    </div>
    <button class="btn btn-default">ADD</button>
</form>
<br>
    <div style="max-height:150px;overflow-y: auto;">
<table id="multiRecordTable" class="table table-bordered table-striped">
    <thead>
        <tr>
            <td>Desription</td>
            <td>From Date</td>
            <td>To Date</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
    </div>
    <br/>
    <div> Test Data after Table </div>

JavaScript

$(document).ready(function () {
    $(".btn").click(function () {
        //alert($("#description").val()); 
        // alert(.id);
        $('.mandatoryCheck').filter(function () {
            return this.value == "";
        }).css({
            'border-color': 'red'
        });

        $('.mandatoryCheck').filter(function () {
            return this.value != "";
        }).css({
            'border-color': ''
        });

        if ($('.mandatoryCheck').filter(function () {
            return this.value == "";
        }).length == 0) {
            $('#multiRecordTable > tbody:last-child').append('<tr><td>' + $("#description").val() + '</td><td>' + $("#fromDate").val() + '</td><td>' + $("#toDate").val() + '</td></tr>');
        }
        return false;
    });

    $('.mandatoryCheck').keyup(function () {
        $(this).filter(function () {
            return this.value != "";
        }).css({
            'border-color': ''
        });
    });

});