I have form and toggle edit. in this sample it works but when I put in the looping, the toggle dont want to show back become toggle edit when another row click. This is my form.
$('.edit').click(function() {
$(this).hide();
var trs = $(this).closest('tr').siblings();
$(trs).each(function() {
var saveCancel = $(this).children().eq(7).find('.save, .cancel');
if (saveCancel.length && saveCancel.is(':visible')) {
saveCancel.hide();
$(saveCancel).siblings('.edit').show();
}
});
$('.form').find('.aaa').attr('disabled', true);
$(this).closest('tr').find('.aaa').attr('disabled', false);
$(this).siblings('.save, .cancel').show();
});
$('.cancel').click(function() {
$('.form').find('.aaa').attr('disabled', true);
$(this).siblings('.edit').show();
$(this).siblings('.save').hide();
$(this).hide();
});
.save,
.cancel {
display: none;
}
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.save,
.cancel {
display: none;
}
</style>
</head>
<body>
<form method='POST' class="formfield" action='EditCompany'>
<table>
<tbody>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='company_name'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='city'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='state'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='zipcode'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='branch'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
<td><span class="glyphicon glyphicon-trash">Delete</span>
</td>
</tr>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='company_name'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='city'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='state'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='zipcode'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='branch'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
<td><span class="glyphicon glyphicon-trash">Delete</span>
</td>
</tr>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='company_name'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='city'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='state'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='zipcode'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='branch'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
<td><span class="glyphicon glyphicon-trash">Delete</span>
</td>
</tr>
</tbody>
</table>
</form>
</body>
and this is the result in my apps.
how to make toggle edit work i looping?
UPDATE:
Currently, your site has a more basic problem: The trs are all enclosed by a separte tbody, which makes your
var trs = $(this).closest('tr').siblings();
to get nothing, so their status won't be checked.
Temp fix:
var trs = $(this).closest('tbody').siblings().find('tr')
Note that wrap each tr with tbody may not be what you intend to do. You may either replace the code, or not wrap each tr with tbody.
When you use $('.edit').click(... to register event handler to .edit, it'll only bind that handler to all existing .edit, which means that .edit which are created in the future won't be handle by that event handler.
To solve this, you can instead use .on, as I mentioned in comment, the format only need to change a little.
// V Parent to handler dynamically created descendants
$('table').on('click', '.edit', .....);
// ^ ^ It means we want that `table` to listen to
// all click events from its descendants that have class edit.
$('#add').click(function(){
$('table tr.form:first').eq(0).clone()
.appendTo($('table tbody'));
});
// This will only get to those
$('table').on('click', '.edit', function() {
$(this).hide();
var trs = $(this).closest('tr').siblings();
$(trs).each(function() {
var saveCancel = $(this).children().eq(2).find('.save, .cancel');
if (saveCancel.length && saveCancel.is(':visible')) {
saveCancel.hide();
$(saveCancel).siblings('.edit').show();
}
});
$('.form').find('.aaa').attr('disabled', true);
$(this).closest('tr').find('.aaa').attr('disabled', false);
$(this).siblings('.save, .cancel').show();
});
// Your origin form, you can see that it won't work on newly created rows.
$('.edit').click(function() {
console.log("Static register");
});
$('table').on('click', '.cancel', function() {
$('.form').find('.aaa').attr('disabled', true);
$(this).siblings('.edit').show();
$(this).siblings('.save').hide();
$(this).hide();
});
.save,
.cancel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add row</button>
<table>
<tbody>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
</tr>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
</tr>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
</tr>
</tbody>
</table>
Related
The problem I'm facing is related with Invoicing system. There is one row exists by default but if there are more than one products then user can Add New Item which adds the new row with jQuery append function.
Invoicing system has few Inputs one of them is Item Name which autocomplete by Typehead JS.
Code of Predefined Row
<tbody id="TableBody">
<tr>
<td style="width: 220px">
<input type="text" class="form-control Item" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
</td>
<td>
<input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
</td>
<td>
<input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
</td>
<td>
<input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
</td>
<td>
<input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
</td>
<td>
<button type="button" class="btn btn-danger DelRow">Delete</button>
</td>
</tr>
</tbody>
Code to Add new Row
$('#AddNewItem').click(function() { $('#TableBody').append(`
<tr>
<td style='width: 220px'>
<input type='text' class='form-control Item' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
</td>
<td>
<input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
</td>
<td>
<input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
</td>
<td>
<input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
</td>
<td>
<input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
</td>
<td>
<button type="button" class="btn btn-danger DelRow">Delete</button>
</td>
</tr>
`); });
Code to show Auto suggestions
$(document).ready(function() {
$('.Item').typeahead({
source: function (query, process) {
return $.get('FetchItem.php?Item', { query: query }, function (data) {
data = $.parseJSON(data);
return process(data);
});
},
});
});
I just wanted to show suggestions on all the additional appended fields.
Any help would be much appreciated, Thank you
Screenshot
Afterall, I got the solution to my answer.
I was using jQuery document load function which was not working on the appended rows.
So instead of $(document).ready(function() { I just used $('.TableBody').on("click", ".Item", function() { and it worked.
I have created a dynamic form and I am trying to send the form data to mysql through PHP but its not working. Data is not getting sent even from the very first row without adding a dynamic row. I'm new to this topic, so I'm out of ideas to solve it. How can I make this form a correct one and send accurate data to mysql?
In my form I have 3 fields that are not dynamic.
Here is the form code:
<form name="newbillform" method="POST" action="save_purchase_details.php">
<table style=" border:1px solid black" cellpadding="5px" cellspacing="0px" align="center" border="0">
<tr>
<td colspan="4" style="background:#0066FF; color:#FFFFFF; fontsize:20px" align="center">
ADD NEW PURCHASE RECORD
</td>
</tr>
<tr>
<td>Date:</td>
<td>
<input type="date" name="p_date"/>
</td>
</tr>
<tr>
<td>Invoice Number:</td>
<td>
<input type="text" name="invoice_no" size="50">
</td>
</tr>
<tr>
<td>Balance:</td>
<td>
<input type="text" name="balance" size="50">
</td>
</tr>
</table>
<h2 style="padding-left:10px;">Enter Product Details Below:-</h2>
<table id="product_details" style="margin-top:8px;" align='center' border='1' width="900px">
<tr id="row1">
<td>
<input type="text" name="qty[]" value="" placeholder="Quantity" size="6">
</td>
<td>
<input type="text" name="pack[]" value="" placeholder="Pack" size="6">
</td>
<td>
<input type="text" name="item_name[]" value="" placeholder="Item Name" size="16">
</td>
<td>
<input type="text" name="batch[]" value="" placeholder="Batch" size="6">
</td>
<td>
<input type="text" name="expiry[]" value="" placeholder="Expiry" size="6">
</td>
<td>
<input type="text" name="mrp[]" value="" placeholder="M.R.P" size="6">
</td>
<td>
<input type="text" name="rate[]" value="" placeholder="Rate" size="6">
</td>
<td>
<input type="text" name="vat[]" value="" placeholder="VAT" size="6">
</td>
<td>
<input type="text" name="discount[]" value="" placeholder="Discount" size="6">
</td>
<td>
<input type="button" class="button-add-row" onclick="add_row();" value="ADD ROW" size="8">
</td>
</tr>
</table>
<center>
<input type="submit" name="submit_row" value="SUBMIT">
</center>
</form>
Here is the javascript code:
<script type="text/javascript">
function add_row()
{
$rowno = $("#product_details tr").length;
$rowno = $rowno + 1;
$("#product_details tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='qty[]' placeholder='Quantity' size='6'></td><td><input type='text' name='pack[]' placeholder='Pack' size='6'></td><td><input type='text' placeholder='Item Name' name='item_name[]' size='16'></td><td><input type='text' name='batch[]' placeholder='Batch' size='6'></td><td><input type='text' name='expiry[]' placeholder='Expiry' size='6'></td><td><input type='text' name='mrp[]' placeholder='M.R.P' size='6'></td><td><input type='text' name='rate[]' placeholder='Rate' size='6'></td><td><input type='text' name='vat[]' placeholder='VAT' size='6'></td><td><input type='text' name='discount[]' placeholder='Discount' size='6'></td><td><input type='button' class='button-add-row' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
$('#'+rowno).remove();
}
</script>
Here is the PHP code:
<?php
$connect = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("store_records",$connect) or die(mysql_error());
if(isset($_POST['submit_row']))
{
$amount;
$grand_total;
for($i = 0; $i < count($_POST['item_name']); $i++)
{
$qty = $_POST['qty'][$i];
$p_date = $_POST['p_date'];
$invoice_no = $_POST['invoice_no'];
$balance = $_POST['balance'];
$pack = $_POST['pack'][$i];
$item_name = $_POST['item_name'][$i];
$batch = $_POST['batch'][$i];
$expiry = $_POST['expiry'][$i];
$mrp = $_POST['mrp'][$i];
$rate = $_POST['rate'][$i];
$vat = $_POST['vat'][$i];
$discount = $_POST['discount'][$i];
$amount = $balance+($qty*$rate)-$discount;
$grand_total = $amount+(($amount*$vat)/100);
$query =mysql_query("insert into bill_records values('', '$p_date', '$invoice_no', '$balance', '$qty','$pack','$item_name', '$batch', '$expiry', '$mrp', '$rate', '$vat', '$discount', '$amount', '$grand_total')");
}
}
?>
It would be of great help. Thank You..
I want to check if a table has any duplicated column in rows. If a table has, an alert to be displayed that without adding database of. Then I want to unplug duplicated data from the table. How can I do that? I'm waiting for your help!
This is my table has duplicated class A:
This is my table html code.
<table id="tblSeatInfo">
<thead>
<tr>
<td>
Class
</td>
<td>
Given Seat
</td>
<td>
Adult Buying Price
</td>
<td>
Adult Selling Price
</td>
<td>
Child Buying Price
</td>
<td>
Child Selling Price
</td>
<td>
Infant Buying Price
</td>
<td>
Infant Selling Price
</td>
</tr>
</thead>
<tbody>
<tr class="tr-notremove">
<td>
<input class="form-control" type="text" name="class" />
</td>
<td>
<input class="form-control seat" type="text" name="givenseat" />
</td>
<td>
<input class="form-control decimal" type="text" name="adultbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="adultprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="childbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="childprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="infantbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="infantprice" />
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-md btn-success btn-addnewseat">Add</button>
<button type="button" class="btn btn-md btn-warning btn-removenewseat">Remove</button>
</div>
</td>
</tr>
</tbody>
</table>
Try something like this
$('[name="class"]').on('input',function(){
var value = $(this).val();
$('[name="class"]').not(this).each(function(){
if($(this).val() == value) {
alert('duplicate content');
}
})
});
demo: https://jsfiddle.net/r3oq636w/1/
The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.
Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE
guys im trying to make a dynamic design for adding students in a class with a button add on the 10th row ![enter image description here][1]
http://www.facebook.com/photo.php?fbid=4099710263250&set=a.1210298669766.32621.1597725369&type=3&theater
i can append a new row with a button on it but when i click the new button the click function did not respond and i still need to click the add button on the 10th row to add new one.
here is the code.
<table>
<th colspan="4"><h2>Boys</h2></th>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname1" class="input">
</td>
<td>
<input type="text" name="bstudnt_mname1" class="input">
</td>
<td>
<input type="text" name="bstudnt_fname1" class="input">
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname2" class="input">
</td>
<td>
<input type="text" name="bstudnt_mname2" class="input">
</td>
<td>
<input type="text" name="bstudnt_fname2" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname3" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname3" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname3" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname4" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname4" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname4" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname5" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname5" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname5" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname6" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname6" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname6" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname7" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname7" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname7" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname8" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname8" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname8" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname9" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname9" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname9" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname10" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname10" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname10" class="input" >
<input type="button" id="" name="add_bstudent" class="button add- bstudent" value="+">
</td>
</tr>
</table>
JS....
$('.add-bstudent').click(function () {
$(this).parent().parent().after("<tr><td><label>Name:</label></td><td> <input type='text' name='bstudnt_lname10' class='input' placeholder='Last Name'></td><td><input type='text' name='bstudnt_mname10' class='input' placeholder='Middle Name'></td><td><input type='text' name='bstudnt_fname10' class='input' placeholder='First Name'> <input type='button' id='' name='add_bstudent' class='button add-bstudent' value='+'></td></tr>");
});
When you use the click() function to register the event, it will only register the event on objects returned by the selector at that moment. If you create an object after the fact, it won't bind to the event. Use the on() function and give it your selector: http://api.jquery.com/on/
Example:
$('#container').on('click', '.add-bstudent', function(event) { ... });
The first thing I noticed is that you do not have a button with class by name of $('.add-bstudent').
It's the name attribute for the button..
Also consider delegating the event by using the .on() so that the event is attached when the element is available
Try this
$('.add-bstudent').click(function () {
$(this).parent('table').append("<tr><td><label>Name:</label></td><td> <input type='text' name='bstudnt_lname10' class='input' placeholder='Last Name'></td><td><input type='text' name='bstudnt_mname10' class='input' placeholder='Middle Name'></td><td><input type='text' name='bstudnt_fname10' class='input' placeholder='First Name'> <input type='button' id='' name='add_bstudent' class='button add-bstudent' value='+'></td></tr>");
});