To get dynamic table values

Question

In the below code i have a dynamic table i will be adding multiple rows and enter values on clicking submit button i want all the table row values.Pls help me to do this.Below provided code pls have a reference.

$(document).ready(function () {
         var i = 1;
         $("#add_row").click(function () {
             $('#addr' + i).html("<td>" + (i + 1) + "</td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail" + i + "' type='text' placeholder='Mail'  class='form-control input-md'></td><td><input  name='mobile" + i + "' type='text' placeholder='Mobile'  class='form-control input-md'></td>");

             $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
             i++;

             Test();
         });
         $("#delete_row").click(function () {
             if (i > 1) {
                 $("#addr" + (i - 1)).html('');
                 i--;
             }
         });

     });

       <div class="row clearfix">
        <div class="col-xs-4 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            Start Range
                        </th>
                        <th class="text-center">
                            End Range
                        </th>
                        <th class="text-center">
                            Value
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text" name='name0'  placeholder='Start Range' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='mail0' placeholder='End Range' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='mobile0' placeholder='Value' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
<input type="button" text="Submit" />

Answer 1

For delete the row you can not get which row you want to remove.

Just try this

$(document).ready(function () {
    var i=0;
    $("#add_row").click(function () {
        i=i+1;
        $('#tab_logic tbody').append("<tr><td>" + i + "</td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail" + i + "' type='text' placeholder='Mail'  class='form-control input-md'></td><td><input  name='mobile" + i + "' type='text' placeholder='Mobile'  class='form-control input-md'></td><td><button type="button" class="delete">Delete</button></td></tr>");

        Test();
    });
    $(".delete").click(function () {
        $(this).parent().parent().remove();
    });
 });

 <div class="row clearfix">
    <div class="col-xs-4 column">
        <table class="table table-bordered table-hover" id="tab_logic">
            <thead>
                <tr >
                    <th class="text-center">
                        #
                    </th>
                    <th class="text-center">
                        Start Range
                    </th>
                    <th class="text-center">
                        End Range
                    </th>
                    <th class="text-center">
                        Value
                    </th>
                    <th class="text-center">
                        Action
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                    1
                    </td>
                    <td>
                    <input type="text" name='name0'  placeholder='Start Range' class="form-control"/>
                    </td>
                    <td>
                        <input type="text" name='mail0' placeholder='End Range' class="form-control"/>
                    </td>
                    <td>
                        <input type="text" name='mobile0' placeholder='Value' class="form-control"/>
                    </td>
                    <td>
                        <button type="button" class="delete">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>