How to add row by clicking a button
Question
I have a html table in which there is no entry and i have made javascript functions to add new rows in the table. I followed this link http://mrbool.com/how-to-add-edit-and-delete-rows-of-a-html-table-with-jquery/26721 but i don't know where is the problem that it is not adding any row. Even on clicking button 'new' nothing happens. I have added all js files and images but still there is problem and i am not able to uderstand where is the problem. this is my html table
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="function.js"></script>
</head>
<body>
<button id="btnAddd">New</button>
<table id="tblData">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
and my function.js file is this
function Add() {
$("#tblData tbody")
.append(
"<tr>"
+ "<td><input type='text'/></td>"
+ "<td><input type='text'/></td>"
+ "<td><input type='text'/></td>"
+ "<td><img src='disk.png' class='btnSave'><img src='delete.png' class='btnDelete'/></td>"
+ "</tr>");
$(".btnSave").bind("click", Save);
$(".btnDelete").bind("click", Delete);
};
function Save() {
var par = $(this).parent().parent();
var tdName = par.children("td:nth-child(1)");
var tdPhone = par.children("td:nth-child(2)");
var tdEmail = par.children("td:nth-child(3)");
var tdButtons = par.children("td:nth-child(4)");
tdName.html(tdName.children("input[type=text]").val());
tdPhone.html(tdPhone.children("input[type=text]").val());
tdEmail.html(tdEmail.children("input[type=text]").val());
tdButtons
.html("<img src='images/delete.png' class='btnDelete'/><img src='images/pencil.png' class='btnEdit'/>");
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
function Delete() {
var par = $(this).parent().parent();
par.remove();
};
$(function() {
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
$("#btnAdd").bind("click", Add);
});
Please help me to solve this problem. Thanks in advance.
2 answers
solution1
4 2014-11-14 10:02:26
your add button's id is: Addd but you used #add in your jquery code.
change #Add to #Addd in jquery part.
solution2
0 2014-11-14 10:12:31
First correct spelling of button, remove extra 'd' from 'Add'
<button id="btnAdd">New</button>
and you need not to bind click event for every delete / edit button added in row. Also, use .on() to bind click event for dynamically added button. See below code
function Add() {
$("#tblData tbody")
.append(
"<tr>"
+ "<td><input type='text'/></td>"
+ "<td><input type='text'/></td>"
+ "<td><input type='text'/></td>"
+ "<td><img src='disk.png' class='btnSave'><img src='delete.png' class='btnDelete'/></td>"
+ "</tr>");
};
function Save() {
var par = $(this).parent().parent();
var tdName = par.children("td:nth-child(1)");
var tdPhone = par.children("td:nth-child(2)");
var tdEmail = par.children("td:nth-child(3)");
var tdButtons = par.children("td:nth-child(4)");
tdName.html(tdName.children("input[type=text]").val());
tdPhone.html(tdPhone.children("input[type=text]").val());
tdEmail.html(tdEmail.children("input[type=text]").val());
tdButtons
.html("<img src='images/delete.png' class='btnDelete'/><img src='images/pencil.png' class='btnEdit'/>");
};
function Delete() {
//use closest to find parent TR
var par = $(this).closest("tr");
par.remove();
};
$(function() {
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
$("#btnAdd").bind("click", Add);
//add click event for dynamically added button
$("tblData").on("click",".btnSave", Save);
$("tblData").on("click",".btnDelete", Delete);
$("tblData").on("click",".btnEdit", Edit);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.