- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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>
- Related Articles
- 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 using jQuery?
- 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 to add a row compression to a DB2 table TAB1?
- How do we add a table row in HTML?
- How to add a new row to JTable with insertRow() in Java Swing
- How can we insert a new row into a MySQL table?
- How to add a new column to an existing table of Laravel in a migration?
- How can I tell if table row is in view using jQuery?
- How to add row percentages to contingency table in R?
- How to add a new column Address in the above DB2 table TAB1?
- How to add a title in anchor tag using jQuery?

Advertisements