<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="keywords" content="How to create a table with add and remove rows functionality using Jquery">
<style>
@font-face{font-family: Lobster;src: url('Lobster.otf');}
h1{font-family: Lobster;text-align:center;}
table{border-collapse:collapse;border-radius:25px;width:800px;}
table, td, th{border:1px solid #CCC;}
tr,input{height:25px;border:1px solid #fff;}
input{text-align:center;}
input:focus{border:1px solid blue;}
.space{margin-bottom: 1px;}
#container{margin-left:110px;}
.but{width:100px;background:#0088CC;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:5px;margin:0px 0px 0px 200px;}
</style>
<script src='jquery.min.js'></script>
</head>
<body>
<h1>Purchase Order</h1>
<div id='container'>
<form id='students' method='post' name='students' action=''>
<table border="1" cellspacing="0">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>PO #</th>
<th>PO Date</th>
<th>PO Duration Start Date</th>
<th>PO Duration End Date</th>
<th>PO TERM</th>
<th>PO Amount</th>
<th>Remarks</th>
<th>Upload PO</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td><span id='snum'>1.</span></td>
<td><input type='text' id='po_date' name='po_date[]'/></td>
<td><input type='text' id='po_ duration_start_date' name='po_ duration_start_date[]'/></td>
<td><input type='text' id='po_duration_end_date' name='po_duration_end_date[]'/></td>
<td><input type='text' id='po_term' name='po_term[]'/> </td>
<td><input type='text' id='po_amount' name='po_amount[]'/></td>
<td><input type='text' id='remarks_po' name='remarks_po[]'/> </td>
<td><input type='file' id='upload_po' name='upload_po[]'/> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<button type='button' name='submit' value='Submit' >submit </button>
</form>
<div class="clearfix"></div>
<br/>
</div>
<script>
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('.check_all').prop("checked", false);
check();
});
var i=2;
$(".addmore").on('click',function(){
count=$('table tr').length;
var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>";
data +="<td><input type='text' id='po_date"+i+"' name='po_date[]'/></td> <td><input type='text' id='po_ duration_start_date"+i+"' name='po_ duration_start_date[]'/></td><td><input type='text' id='po_duration_end_date"+i+"' name='po_duration_end_date[]'/></td><td><input type='text' id='po_term"+i+"' name='po_term[]'/></td><td><input type='text' id='po_amount"+i+"' name='po_amount[]'/></td><td><input type='text' id='remarks_po"+i+"' name='remarks_po[]'/></td><td><input type='file' id='upload_po"+i+"' name='upload_po[]'/></td></tr>";
$('table').append(data);
i++;
});
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);
}
});
}
function check(){
obj=$('table tr').find('span');
$.each( obj, function( key, value ) {
id=value.id;
$('#'+id).html(key+1);
});
}
</script>
</body>
</html>
