I am looking to add the table rows dynamically ,such that id of every element of row should be one more than the ids of tds of previous row.,like if previous row has tds with ids a7,b7,c7 next row will have tds with a8,b8,c8 and so on
var rowCount=0;
function createit(){
rowCount++;
var tds=$("#addrowtd").closest('tr').children().each((a)=>{
//how to get the ids of tds here
console.log(a);
});// this outputs addrowtd ,how to get a2 ,b2 and c2 of this row
//console.log(tds)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a3"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b3"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c3"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove();//removig the previous one
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control"/>
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control"/>
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block" >Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>
I modified you code in one line to get the last tr from the table and get its id, then increment it .
var tds = $('#myTable').children()[1].lastElementChild.firstElementChild.getAttribute('id'); this is what I did. may be helpful. please take a look at the snippet. to see the id change please use developer tool.
var rowCount = 0;
function createit() {
rowCount++;
var tds = $('#myTable').children()[1].lastElementChild.firstElementChild.getAttribute('id');
//debugger;
tds = +tds.match(/\d/g).join('')+1;
console.log(`new id number ${tds}`)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a'+tds+'"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b'+tds+'"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c'+tds+'"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove(); //removig the previous one
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control" />
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block">Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>
I hope this helps ,I have printed all the ids of td in the row except the last one
var rowCount=0;
function createit(){
rowCount++;
let tdarray=[];
var tds=$("#addrowtd").closest('tr').children().not(':last').each((column, td)=>{
tdarray.push($(td).attr('id'));
//how to get the ids of tds here
console.log($(td).attr('id'));
});// this outputs addrowtd ,how to get a2 ,b2 and c2 of this row
//console.log(tds)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a3"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b3"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c3"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove();//removig the previous one
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control"/>
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control"/>
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block" >Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>
Related
I'm saving row for row into a sql table, here is the code for my table in the view.
<table id="submissionTable" class="table table-bordered">
<thead>
<tr>
<th colspan="1" style="background-color:lightsteelblue">
stuffID
</th>
<th colspan="1" style="background-color:lightsteelblue">
stuffDescription
</th>
</tr>
</thead>
<tr id="tablerow0">
<td>
<div class="editor-field">
<input class="text-box single-line" name="stuffID[0]" type="text" value="" required="required" />
</div>
</td>
<td>
<div class="editor-field">
<input class="text-box single-line" name="stuffDescription[0]" type="text" value="" required="required" />
</div>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="removeTr(0);">Delete</button>
</td>
</tr>
</table>
<p style="text-align:center">
<button id="add" type="button" class="btn btn-primary">Add</button>
</p>
<hr />
</fieldset>
<table class="table table-bordered" style="width:80%" align="center">
<tbody>
<tr>
<th style="text-align:center">
<input type="submit" value="SUBMIT" class="btn btn-info" />
</th>
</tr>
</tbody>
</table>
The javascript code
var counter = 1;
$(function () {
$('#add').click(function () {
$('<tr id="tablerow' + counter + '"><td>' +
'<input type="text" class="text-box single-line" name="stuffID[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<input type="text" class="text-box single-line" name="stuffDescription[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<button type="button" class="btn btn-primary" onclick="removeTr(' + counter + ');">Delete</button>' +
'</th>' +
'</tr>').appendTo('#submissionTable');
counter++;
return false;
});
});
And then I want to insert the rows into SQL from the controller
for (int i = 0; i <= Request.Form.Count; i++)
{
tblGoods.stuffID= Request.Form["stuffID[" + i + "]"];
tblGoods.stuffDescription= Request.Form["stuffDescription[" + i + "]"];
tblGoods.DetailID = getID;
}
_context.tbl_Goods.Add(tblGoods);
_context.SaveChanges();
However, when I am saving only 1 row, it populates the one row plus 5 more empty rows into my SQL table.
What am I doing wrong?
using this code i can already calculate two value in row now I am trying to sum column values below local column field all column value with this,
<table class="table order-list turf" id="turf">
<tr>
<td>Items</td>
<td>Local</td>
<td>Foreign</td>
<td>Total</td>
</tr>
<tr>
<td class="col-sm-3"><input type="text" name="" value="item1"></td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value1[]" class="calculated_value"/></td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value2[]" class="form-control calculated_value" />
</td>
<td class="col-sm-3 total">
<input type="text" name="total[]" class="form-control total" id="total" readonly="" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
<input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" />
</td>
</tr>
<tr class="grand-total persist">
<td>Total Investment</td>
<td id="local_total"><input type="text" readonly="" name=""></td>
<td id="foreign_total"><input type="text" readonly="" name=""></td>
<td id="total_total"><input type="text" readonly="" name=""></td>
</tr>
</table>
var counter = 1;
$("body").on("input", ".calculated_value", function() {
var parent_row = $(this).closest('tr');
var totalincome = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find(".total").val(totalincome);
Demo
I hope this is what you need. Code could be refactored but I think you can do it yourself.
$(document).ready(function() {
var counter = 1;
$("body").on("input", ".calculated_value", function() {
calculate(this);
});
function calculate(elm) {
var parent_row = $(elm).closest('tr');
var elTotalIncome = $("#local_milion_grand_total").find("input");
var elTotalForeign = $("#foreign_milion_grand_total").find("input");
var elTotal = $('#total_milion_grand_total').find("input");
var totalincome = 0;
var totalLocal = 0;
var totalForeign = 0;
var total = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find('.total').val(totalincome);
for (i = 0; i < $("tbody tr").length; i++) {
let elCol = $($("tbody tr")[i]).find("td input");
let tmp = parseInt(elCol[1].value);
let tmp2 = parseInt(elCol[2].value);
let tmp3 = parseInt(elCol[3].value);
if (isNaN(tmp)) tmp = 0;
if (isNaN(tmp2)) tmp2 = 0;
if (isNaN(tmp3)) tmp3 = 0;
totalLocal += tmp;
totalForeign += tmp2;
total += tmp3;
}
elTotal.val(total);
elTotalIncome.val(totalLocal);
elTotalForeign.val(totalForeign);
}
//add new row button
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" value="Item ' + counter + '"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
if (counter == 1) return;
$(this).closest("tr").remove();
counter -= 1
calculate(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table order-list turf" id="turf">
<thead>
<tr>
<td>Items</td>
<td>Local(Milion Taka/Milion US$)</td>
<td>Foreign(Milion Taka/Milion US$)</td>
<td>Total(Milion Taka/Milion US$)</td>
<td> <input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" /></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-3">
<input type="text" name="" value="item1">
</td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value1[]" class="form-control calculated_value_row calculated_value" />
</td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value2[]" class="form-control calculated_value_row calculated_value" />
</td>
<td class="col-sm-3 total">
<input type="text" name="total[]" class="form-control total" id="total" readonly="" />
</td>
<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>
</tr>
</tbody>
<tfoot>
<tr class="grand-total persist">
<td>Total Investment</td>
<td id="local_milion_grand_total"><input type="text" class="form-control local_milion_grand_total" readonly="" name=""></td>
<td id="foreign_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
<td id="total_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
</tr>
</tfoot>
</table>
I want to multiply 2 input box (man_day_rates * estimated_man_days) but the input is dynamically generate and display it in subtotal.The problem is I only can calculate the first input, when i press add button, the second input does cannot calculate.
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\
<td style="border:none;">\
<input id="man_day_rates'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
</td>\
<td style="border:none;">\
<input id="estimated_man_days'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
</td>\
<td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
<td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
</tr> ');
});
$(document).ready(function(){
var man_day_rates = $('#man_day_rates1');
var estimated_man_days = $('#estimated_man_days1');
estimated_man_days.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
man_day_rates.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-striped" id="dynamic_field" style="padding:0px;">
<thead>
<tr class="headings">
<th class="column-title">#</th>
<th class="column-title">Item Title</th>
<th class="column-title">Description </th>
<th class="column-title" style="width:100px;">Man Day Rates (RM)</th>
<th class="column-title" style="width:100px;">Estimated Man Days </th>
<th class="column-title"style="width:100px;">Subtotal (RM)</th>
<th class="column-title"style="width:100px;"></th>
</th>
</tr>
</thead>
<tbody>
<tr id="row01">
<?php
$i = 1;
?>
<td style="border:none;">
<input id="man_day_rates<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >
</td>
<td style="border:none;">
<input id="estimated_man_days<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">
</td>
<td id=""> <input id="result" type="text" name="" value=""/></td>
<td class="add_remove_button" style="height: 20px;line-height: 20px;white-space: nowrap;"></td>
</tr>
</tbody>
</table>
</div>
<div><button id="add" type="button" class="btn btn-primary "><span class="fa fa-plus" style="margin-right:5px;"></span>Add Items</button></div>
I want to multiply 2 input box (man_day_rates * estimated_man_days) but the input is dynamically generate and display it in subtotal.The problem is I only can calculate the first input, when i press add button, the second input does cannot calculate.
you have to initialize your key event each time when you add new control dynamically.
Try like below.
$(document).ready(function(){
$('#add').click(function(){
i++;
//Add field document History
$('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\
<td style="border:none;">\
<input id="man_day_rates'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
</td>\
<td style="border:none;">\
<input id="estimated_man_days'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
</td>\
<td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
<td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
</tr> ');
var man_day_rates = $('#man_day_rates'+i);
var estimated_man_days = $('#estimated_man_days'+i);
estimated_man_days.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
man_day_rates.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
});
});
I have tried to add input text element to my form
through this jquery code below
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
counter++;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="" name="item'+counter+'"/></td>';
cols += '<td><input type="text" class="" name="rate'+counter+'"/></td>';
cols += '<td><input type="text" class="" name="quantity'+counter+'"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#itemcounter").val(counter);
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
var count = $("#itemcounter").val();
$("#itemcounter").val(count-1);
counter = count -1;
});
});
Now the form is as below:
<form action="{{url('/billgenerate')}}" method="post">
<input type="hidden" name="itemcounter" id="itemcounter" value="">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Item Name</td>
<td>Rate</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<input type="text" name="item0" class="" style="width:22em" />
</td>
<td class="col-sm-3">
<input type="text" name="rate0" class=""/>
</td>
<td class="col-sm-3">
<input type="text" name="quantity0" class=""/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block" name="addrow" id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
</form>
when I add add new row, it adds successfully, and also the element is added with its name increment by 1 so that while posting the page the name does not get conflicts.
but when I try to add a input predefined inside the table, php recognizes that particular element.
but when I try to add it through jquery code, it does not return the elements which are added. where am i going wrong?
I've a table with header and footer and a default row already created. When I add more rows dynamically I don't get the exact row count. It always returns the correct row count if I add them before.
Below is the code I've written -
<table id="empTable" class="table table-responsive table-striped table-bordered">
<thead>`enter code here`
<tr>
<td>Name of Employee</td>
<td>Father's Name/Husband's Name</td>
<td>Basic</td>
<td>Total attendance</td>
<td>Clear</td>
</tr>
</thead>
<tbody id="TextBoxContainer">
<tr>
<td><input id="emp_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input id="father_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i> Add </button></th>
</tr>
</tfoot>
</table>
<script>
//function to add/remove rows
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
//function to return value of Dynamic content
function GetDynamicTextBox(value) {
return '<td><input name="DynamicTextBox" type="text" value="" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="text" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'
}
</script>
And I'm using this line to return row count but it's not working -
var rowCount = document.getElementById("TextBoxContainer").rows.length;
$('#btnSave').on('click', function() {
alert(rowCount);
})
I've tried all the solutions from stackoverflow but not getting why it's not working for dynamic rows whereas same code I saw in a fiddle working.
Please help.
Because you create new rows on the fly you need to move this line:
var rowCount = document.getElementById("TextBoxContainer").rows.length;
inside:
$('#btnSave').on('click', function() {
And as per #charlietf comment I would suggest to change the row count in:
var rowCount = $("#TextBoxContainer tr").length;
//function to return value of Dynamic content
function GetDynamicTextBox(value) {
return '<td><input name="DynamicTextBox" type="text" value="" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="text" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>';
}
$(function () {
$('#btnSave').on('click', function() {
var rowCount = $("#TextBoxContainer tr").length;
console.log('Rows: ' + rowCount);
})
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="empTable" class="table table-responsive table-striped table-bordered">
<thead>`enter code here`
<tr>
<td>Name of Employee</td>
<td>Father's Name/Husband's Name</td>
<td>Basic</td>
<td>Total attendance</td>
<td>Clear</td>
</tr>
</thead>
<tbody id="TextBoxContainer">
<tr>
<td><input id="emp_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input id="father_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i> Add </button>
<button id="btnSave" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="ASavee controls"><i class="glyphicon glyphicon-plus-sign"></i> Save </button></th>
</tr>
</tfoot>
</table>