Dynamically Add or Remove Table Row Using jQuery

Posted by & filed under CSS, HTML5, JQUERY.

Dynamically Add or Remove Table Row Using jQuery is very helpful in number of places where teachers wants to update students marks details or admin wants to update their Users details. This is very simple to make it yourself just follow this tutorial step by step. If you came across any difficulty implementing this just leave your comments in the comment box.

Dynamically Add or Remove Table Row Using jQuery

Demo

jquery add remove table row dynamically with checkbox functionality

Dynamically Add or Remove Table Row Using jQuery

Step 1:

Create index.php file with following html skelton structure.

<!DOCTYPE html> 
<html>
<head>
	<title>jquery add remove table row dynamically with checkbox functionality</title>
	<meta charset='utf-8'>
</head>
<body>
</body>
</html>

 

Dynamically Add or Remove Table Row Using jQuery

Download

Step 2:

Now add a html form in the body section, and inside form create a table like in the below html.

<form id='Prescription' method='post' name='Prescription' action='index.php'>
    <table border="1" cellspacing="0">
        <tr>
            <th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
            <th>S. No</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Tamil</th>
            <th>English</th>
            <th>Computer</th>
            <th>Total</th>
        </tr>
        <tr>
            <td><input type='checkbox' class='case'/></td>
            <td><span class="row_no">1.</span></td>
            <td><input type='text' id='first_name' name='first_name[]'/></td>
            <td><input type='text' id='last_name' name='last_name[]'/></td>
            <td><input type='text' id='tamil' name='tamil[]'/></td>
            <td><input type='text' id='english' name='english[]'/> </td>
            <td><input type='text' id='computer' name='computer[]'/></td>
            <td><input type='text' id='total' name='total[]'/> </td>
        </tr>
    </table>

    <div class="btn-container">
        <button type="button" class='btn delete'>- Delete</button>
        <button type="button" class='btn addmore'>+ Add More</button>
    </div>
    <p>
        <input type='submit' name='submit' value='submit' class='but'/>
    </p>
</form>

Step 3:

Now add the following CSS stylling in the head section of the index.php file.

<style>
    @import url('https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap');
    *{margin: 0px;padding: 0px;box-sizing: border-box;}
    html,body{height: auto;min-height: 100%;width: 100%;}
    body {position: relative;font-family: Raleway, sans-serif;font-size: 16px;display: flex;align-items: center;justify-content: center;}
    input {font-family: inherit;}
    @font-face{font-family: Lobster;src: url('Lobster.otf');}
    h1{font-family: Lobster;text-align:center;}
    table{border-collapse:collapse;border-radius:25px;width:880px;font-family: inherit;}
    table, td, th{border:1px solid #00BB64;}
    tr,input{height:30px;border:1px solid #fff;}
    input{text-align:center;}
    input:focus{border:1px solid yellow;}
    .space{margin-bottom: 2px;}
    .but{width:270px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;margin:0px 0px 0px 290px;font-size: 1rem;}
    .btn-container{margin: 15px 0px;}
    button, .btn {padding: 5px 10px;font-family: inherit;font-size: .75rem;}
    .delete{background-color: #f44646;color: #fff;}
    .addmore{background-color: #00BB64;color: #fff;}
</style>

Step 4:

Now add jQuery library file in the head section or bottom of html file wherever you like.

<script src='jquery-1.9.1.min.js'></script>

Step 5:

Here is the jQuery script that will add/append new table row when user clicked on addMore button.

<script>
var i=2;
$(".addmore").on('click',function(){
    var rowCount = $('.row_no').length + 1;
    var data="<tr><td><input type='checkbox' class='case'/></td><td><span class='row_no'>"+rowCount+".</span></td>";
    data +="<td><input type='text' id='first_name"+i+"' name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"' name='last_name[]'/></td><td><input type='text' id='tamil"+i+"' name='tamil[]'/></td><td><input type='text' id='english"+i+"' name='english[]'/></td><td><input type='text' id='computer"+i+"' name='computer[]'/></td><td><input type='text' id='total"+i+"' name='total[]'/></td></tr>";
    $('table').append(data);
    i++;
});
</script>

Step 6:

Following jQuery script will deletes/removes the selected table rows from the table when user clicked on Delete button. Also updates each row number by selecting row_no class using $.each.

<script>
$(".delete").on('click', function() {
    $('.case:checkbox:checked').parents("tr").remove();
    changeAllRowNo();
});

function changeAllRowNo() {
    $('.row_no').each((k,ele)=>{
        $(ele).html(k+1+'.')
    });
}
</script>

Step 7:

Following jQuery script helps you to select all the table rows in the table.

<script>
function select_all() {
	$('input[class=case]:checkbox').each(function(){ 
		if($('input[class=check_all]:checkbox:checked').length == 0){ 
			$(this).prop("checked", false); 
		} else {
			$(this).prop("checked", true); 
		} 
	});
}

</script>

Feel free to refer one of my previous tutorial on Dynamically Add and Remove Textbox Using jQuery..

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!