- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a new row in a table using jQuery?
Use event delegations to include both add a new and delete a table row on a web page using jQuery.
Firstly, set a button in HTML to add new row
<button id="newbtn"> Add new Row </button>
Now under the button click event, set the code:
$("#newbtn").click(function () {
}Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = 1;
$("#newbtn").click(function () {
$("table tr:first").clone().find("input").each(function () {
$(this).val('').attr({
'id': function (_, id) {
return id + x
},
'name': function (_, name) {
return name + x
},
'value': ''
});
}).end().appendTo("table");
x++;
});
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<button type="button" class="deletebtn" title="Remove row">X</button>
</td>
<td>
<input type="text" id="txtTitle" name="txtTitle">
</td>
<td>
<input type="text" id="txtLink" name="txtLink">
</td>
</tr>
</table>
<button id="newbtn">Add new Row</button>
</body>
</html>
Updated on 20-Jun-2020 15:37:29
- Related Questions & Answers
- How to add table row in jQuery?
- How to insert new row into table at a certain index using jQuery?
- How to delete a row from a table using jQuery?
- How to add a new list element under a <ul> using jQuery?
- How to add a row compression to a DB2 table TAB1?
- How to add a row to a table using only strings from another table as reference in MySQL?
- How to add a new column to an existing table using JDBC API?
- How do we add a table row in HTML?
- How can we insert a new row into a MySQL table?
- How to add a new row to JTable with insertRow() in Java Swing
- How to add a title in anchor tag using jQuery?
- How to add a new column Address in the above DB2 table TAB1?
- How can I tell if table row is in view using jQuery?
- How to add a new element in the XML using PowerShell?
- How to add row percentages to contingency table in R?
Advertisements