data table add/removed daynamicaly

by md mostofa billa Ashik

HTML

<form>
        <input type="text" id="name" placeholder="Name">
        <input type="text" id="email" placeholder="Email">
    	<input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Peter Parker</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>

CSS

form{
	margin: 20px 0;
    }
    form input, button{
	padding: 6px;
    font-size: 18px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
		border-collapse: collapse;
		background: #fff;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
	body {
		background: #ccc;
	}
	.add-row, .delete-row {
	font-size: 16px;
    font-weight: 600;
    padding: 8px 16px;
	}

JavaScript

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