Today, We want to share with you how to add dynamic rows in a table with javascript?.In this post we will show you dynamically add/remove rows in html table using php, hear for dynamically add/remove columns in html table using javascript we will give you demo and example for implement.In this post, we will learn about Add/Delete table rows dynamically using JavaScript with an example.

how to add, edit and delete rows of a html table with jquery?

Contents

Use the jQuery .append() or .remove() Method

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically - www.pakainfo.com</title>
<style>
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
		border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var display_data = "<tr><td><input type='checkbox' name='player'></td><td>" + name + "</td><td>" + email + "</td></tr>";
            $("table tbody").append(display_data);
        });
        
        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="player"]').each(function(){
            	if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Member Name">
        <input type="text" id="email" placeholder="Member Email Address">
    	<input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Choose</th>
                <th>Member Name</th>
                <th>Member Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="player"></td>
                <td>Rohit Sharma</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Remove Row</button>
</body> 
</html>

I hope you get an idea about dynamically add/remove rows in html table using jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

how to add, edit and delete rows of a html table with jquery?

Related posts: