Dynamically Add or Remove Table Row Using 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.
Demo
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>
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
