Jquery On click Add Row

jquery on click add row

by Susan Adhikary

HTML

<input type="button" class="add-row" value="Add Row">
<table class="table table-condensed">
                                                    <thead>
                                                        <tr>
                                                            <th>SN</th>  
           <th>check box(Check Checkbox to delete)</th>                                             </tr>
                                                    </thead>
                                                    <tbody id="tablebody">
                                                        <tr>
                                                            <td>1</td>                    <td> <input type="checkbox" name="record"></td> 
                                                            </tr>                            </tbody>
                                                </table>
<button type="button" class="delete-row">Delete Row</button>

JavaScript

$(document).ready(function(){
    var x=1;
        $(".add-row").click(function(){ 
        x++;
            var markup = "<tr><td>"+x+"</td><td><input type='checkbox' name='record'></td></tr>";
            $("#tablebody").append(markup);
        });
        
        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("#tablebody").find('input[name="record"]').each(function(){
            	if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });