I made a data sheet similar to excel with columns and rows and a buttons to add rows and column if needed I want to make a cell or div disabled (for read-only) that display the summation of numbers inside cells in a specific column, the problem is how I select that column and every newly added cell to that column
here is the code of the datasheet
<div class="content-container">
<div class="search">
<button class="table_btn" id="addrow">
Add Row
</button>
<button class="table_btn" id="addcol">
Add Column
</button>
<button class="table_btn" id="sav">
Save
</button>
<button class="table_btn" id="edi">
Edit
</button>
<input type="text" class="form-control" id="search-box" />
</div>
<table
class="table table-striped table-dark table-hover table-bordered"
id="mtable"
>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/georgesteven1/5dsn7ouc/22/
If I get it right, you are looking for a selector for all elements in a certain column. If so you can use the ":nth-child(n)" CSS selector.
Let's say you need to select the second column:
$("tr td:nth-child(2)").addClass("selected");
Hope it helps.
Related
I am creating a landing page with a form. I want to set up where every 10th person who signed up links to a "special" page where they receive a prize. For example: first 9 people will redirect to thankyou.html page where the 10th person will link to prize.html page. Is this possible? Thank you in advance.
<form method="post" enctype="multipart/form-data" action="http://form.relevanttools.com/rt-cgi-bin/satellite">
<input type="hidden" name="code" value="12531"> <input type="hidden" name="db" value="project"> <input type="hidden" name="source" value="Prize"> <input type="hidden" name="optin" value=""> <input type="hidden" name="type" value="signup"> <input type="hidden" name="user_email_msg" value=""> <input type="hidden" name="admin_email_addr" value=""> <input type="hidden" name="redir" value="http://www.link.com/thankyou.html">
<table border="0">
<tr>
<td> </td>
<td>First Name*</td>
<td> </td>
<td> <input type="text" id="first_name" name="first_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Last Name*</td>
<td> </td>
<td> <input type="text" id="last_name" name="last_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Email*</td>
<td> </td>
<td> <input type="text" id="email" name="email*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Age*</td>
<td> </td>
<td> <input type="text" id="age" name="age*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Gender</td>
<td> </td>
<td>
<div class="align-left"> <input type="radio" name="gender" value="Male">Male<br> <input type="radio" name="gender" value="Female">Female<br> </div>
</td>
</tr>
<tr>
<td> </td>
<td>Zip</td>
<td> </td>
<td> <input type="text" id="zip" name="zip" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Private Policy*</td>
<td> </td>
<td> <input type="checkbox" id="private_policy" name="private_policy" value="x"> </td>
</tr>
<tr>
<td> </td>
<td>Email Subscription</td>
<td> </td>
<td> <input type="checkbox" id="email_opt_in" name="email_opt_in" value="x"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value = "Submit" ></td>
</tr>
</table>
</form>
You could give the button a 10% probability of redirecting to the prize page - but that's the best without a server.
Javascript is client side. Meaning it has no way of knowing how other people have acted. The only way to know that is storing every click in a database and counting that.
I am new to jQuery and javascript, I need a help on how to do computation on form text field in an array. See below sample code;
<head lang="en">
<meta chartaxt="UTF-8">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<title>Sample salary computation</title>
</head>
<body>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
</form>
</body>
I want a jquery script that can sum total = (salary + tax) for each staff using onclick button
$("#submit").click(function() {
$("tr").each(function() {
if ($(this).find(".salary")) {
var salary = parseInt($(this).find(".salary").val(), 10)
var tax = parseInt($(this).find(".tax").val(), 10)
$(this).find(".total").val(salary + tax)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
<button id="submit" type="button">Submit</button>
You can use selector to get or set the val with iQuery. Something like this
$("button").click(function(){
var total = $("input[name=salary]").val()+$("input[name=tax]").val();
$("input[name=total]").val(tatal);
});
Here is one solution:
http://codepen.io/tryggvigy/pen/BzAqGR
var sums = []
$('input[type=button]').click(function() {
var salaries = $('.salary')
.toArray()
.map(function(salary) { return salary.value })
var taxes = $('.tax')
.toArray()
.map(function(tax) { return tax.value})
sums = salaries.map(function(salary, i) {
return parseInt(salary) + parseInt(taxes[i])
})
alert(document.sums)
})
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/
I am trying to make a little form in which the users select their gender. I have a script that creates a new line for additional users but the problem is that as this code clones the previous element and the radio button name attribute is the same as before making the gender selection name unusable, is there a way to change the radio buttons name when adding a new row so the group will be different to the previous groups name.
function addRow() {
var radName = document.getElementsByName('gender2').value;
var table = document.getElementById('myTable');
var row = document.getElementById('lastRow');
var newRow = row.cloneNode(true);
table.appendChild(newRow);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>
Assign name property for child elements of cloned node.
Use querySelector to select element.
Use querySelectorAll('#myTable tr') selector to get the length of the tr elements.
function addRow() {
var radName = document.getElementsByName('gender2').value;
var table = document.getElementById('myTable');
var row = document.getElementById('lastRow');
var newRow = row.cloneNode(true);
var index = --document.querySelectorAll('#myTable tr').length;
newRow.querySelector('[value="Male"]').name = 'gender' + index;
newRow.querySelector('[value="Male"]').name = 'gender' + index;
table.appendChild(newRow);
}
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
You should not try to clone the line and make changes to names.
You should generate the HTML code for the row and hanlding the correct name directly.
Here is an example snippet:
var idx = 0;
window.onload = addRow;
function addRow() {
var rowHTML = '<td><input placeholder="Surname" /></td><td><input placeholder="Forename(S)" /></td><td><input placeholder="Age" /></td><td><input placeholder="City" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Male" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Female" /></td>';
var row = document.createElement("tr");
row.innerHTML = rowHTML;
var table = document.getElementById('myTable');
table.appendChild(row);
idx++;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
</table>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>
Done this with JQuery, Try this:
function addRow() {
var table = $('#myTable');
var newRow = $("#myTable tr:last").clone()
var name = $(newRow).find("input[type='radio']").attr("name");
var newVal = parseInt(name.match(/\d+/)) + 1;
$(newRow).find("input[type='radio']").attr("name", 'gender' + newVal);
table.append(newRow);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>
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>");
});