Dynamically Append Rows to the Table with JQuery

Sahil Saini

10y123.5k14100Article

Introduction

Dynamically append the rows to the table with JQuery.
Here we have an example that show the event details. Against each event there may be a number of tickets generated for an event.
The tickets generated have to be added in the table as a row, containing Ticket number, price, edit, and save button for save.
Edit and Delete buttons also given for their respective operations. They also giving dynamic editing and deleting features.
On click of save data will be posted on server.

Start writing HTML Code

Create basic layout of the page.
Add texboxes, button for appending row dynamically and save button for posting the data on the server.
Add a table with header row only. In this table we have to append rows by clicking on ticket button.
1. <html>
3. <head>
4. <title></title>
5. </head>
7. <body>
8. <div class="container">
9. <div class="form-horizontal">
10. <div class="form-group">
11. <div class="row">
12. <div class="col-md-3">
13. Event Name :
14. </div>
15. <div class="col-md-7">
16. <input type="text" class="form-control" placeholder="Enter Event Name" name="txtEvent" id="txtEvent" />
17. </div>
18. </div>
19. </div>
20. <div class="form-group">
21. <div class="row">
22. <div class="col-md-3">
23. Event Desc :
24. </div>
25. <div class="col-md-7">
26. <input type="text" class="form-control" placeholder="Enter Event Description" name="txtEventDesc" id="txtEventDesc" />
27. </div>
28. </div>
29. </div>
30. <div class="form-group">
31. <div class="row">
32. <div class="col-md-3">
33. Start Date :
34. </div>
35. <div class="col-md-3">
36. <div class="input-group input-append date">
37. <input type="text" class="form-control" id="datetimepicker1" placeholder="Enter Event Start Date" onblur="restrictDate()" />
38. <span class="input-group-addon">
39. <span class="glyphicon glyphicon-calendar"></span>
40. </span>
41. </div>
42. </div>
43. <div class="col-md-1">
44. End Date :
45. </div>
46. <div class="col-md-3">
47. <div class="input-group input-append date">
48. <input type="text" class="form-control" id="datetimepicker2" placeholder="Enter Event End Date" />
49. <span class="input-group-addon">
50. <span class="glyphicon glyphicon-calendar"></span>
51. </span>
52. </div>
53. </div>
54. </div>
55. </div>
56. <div class="form-group">
57. <div class="row">
58. <div class="col-md-3">
59. Event Organizer :
60. </div>
61. <div class="col-md-7">
62. <input type="text" class="form-control" placeholder="Enter Event Organizer" name="txtOrganizer" id="txtOrganizer" />
63. </div>
64. </div>
65. </div>
66. <div class="form-group">
67. <div class="row">
68. <div class="col-md-3">
69. Ticket:
70. </div>
71. <div class="col-md-7">
72. <input type="button" class="btn btn-default" onclick="addRow();" name="btnTicket" id="btnTicket" value="Ticket" />
73. </div>
74. </div>
75. </div>
76. <div class="form-group">
77. <div class="row">
78. <div class="col-md-03"></div>
79. <div class="col-md-7"></div>
80. </div>
81. </div>
82. <div class="form-group">
83. <div class="row">
84. <div class="col-md-2"></div>
85. <div class="col-md-7">
86. <table class="table table-striped table-bordered" id="tbl">
87. <tr>
88. <th>ID</th>
89. <th>Ticket No</th>
90. <th>Price</th>
91. <th>Actions</th>
92. </tr>
93. </table>
94. </div>
95. </div>
96. </div>
97. <div class="form-group">
98. <div class="row">
99. <div class="col-md-2">
100. </div>
101. <div class="col-md-7">
102. <input type="button" class="btn btn-primary" name="btnSave" id="btnSave" onclick="SaveEvent();" value="Save" />
103. </div>
104. </div>
105. </div>
106. </div>
107. </div>
108. </body>
110. </html>

Start writing script for dynamic crud of row

addRow function appends the row in the table containing textbox ,label,button for save with seprate id of each row and each control in a row.
SaveTicket function save the current row in which the click event is fired and adds the edit and delete button in the row inplace of save.
row id is passed to each function to verify that click event is performed from which row.
EditTicket function again edit the current row and show textboxes in place of labels with update button to update the data in a row.
UpdateTicket update the data and show the edit and delete button with all the data in labels.
DeleteTicket delete the row from the table.
Include the script in head tag of html page.
1. function addRow()
2. {
3. var table = document.getElementById("tbl"); //get the table
4. var rowcount = table.rows.length; //get no. of rows in the table
5. //append the controls in the row
6. var tblRow = '
7. <tr id="row' + rowcount + '">
8. <td>
9. <label id="lblID' + rowcount + '">' + rowcount + '</label>' +
10. '
11. </td>
12. <td>
13. <input type="text" class="form-control" placeholder="Enter Ticket No" id="txtTicketNo' + rowcount + '" />
14. </td>' +
15. '
16. <td>
17. <input type="text" class="form-control" placeholder="Enter Price" id="txtPrice' + rowcount + '" />
18. </td>' +
19. '
20. <td>
21. <input type="button" class="btn btn-info" id="btnSave' + rowcount + '" onclick="SaveTicket(' + rowcount + ')" value="Save" />
22. </td>
23. </tr>'
24. //append the row to the table.
25. $("#tbl").append(tblRow);
26. }
28. function SaveTicket(id)
29. {
30. var id = $("#lblID" + id).html();
31. var tcktNo = $("#txtTicketNo" + id).val();
32. var Price = $("#txtPrice" + id).val();
33. //remove current selected row
34. $("#row" + id).remove();
35. //append new row
36. var tblRow = '
37. <tr id="row' + id + '">
38. <td>
39. <label id="lblID' + id + '">' + id + '</label>
40. </td>
41. <td>
42. <label id="lblTicketNo' + id + '">' + tcktNo + '</label>' +
43. '
44. </td>
45. <td>
46. <label id="lblPrice' + id + '" >' + Price + '</label>
47. </td>
48. <td>' +
49. '
50. <input type="button" class="btn btn-warning" id="btnEdit' + id + '" onclick="EditTicket(' + id + ')" value="Edit" />' +
51. ' |
52. <input type="button" class="btn btn-danger" id="btnDelete' + id + '" onclick="DeleteTicket(' + id + ')" value="Delete" />
53. </td>
54. </tr>'
55. $("#tbl").append(tblRow);
56. }
58. function EditTicket(id)
59. {
60. var id = $("#lblID" + id).html();
61. var tcktNo = $("#lblTicketNo" + id).html();
62. var Price = $("#lblPrice" + id).html();
63. $("#row" + id).remove();
64. var tblRow = '
65. <tr id="row' + id + '">
66. <td>
67. <label id="lblID' + id + '">' + id + '</label>
68. </td>' +
69. '
70. <td>
71. <input type="text" class="form-control" placeholder="Enter Ticket No" value=' + tcktNo + ' id="txtTicketNo' + id + '" />
72. </td>' +
73. '
74. <td>
75. <input type="text" class="form-control" placeholder="Enter Price" value=' + Price + ' id="txtPrice' + id + '" />
76. </td>' +
77. '
78. <td>
79. <input type="button" class="btn btn-info" id="btnUpdate' + id + '" onclick="UpdateTicket(' + id + ')" value="Update" />
80. </td>
81. </tr>'
82. $("#tbl").append(tblRow);
83. }
85. function UpdateTicket(id)
86. {
87. var id = $("#lblID" + id).html();
88. var tcktNo = $("#txtTicketNo" + id).val();
89. var Price = $("#txtPrice" + id).val();
90. $("#row" + id).remove();
91. var tblRow = '
92. <tr id="row' + id + '">
93. <td>
94. <label id="lblID' + id + '">' + id + '</label>
95. </td>
96. <td>
97. <label id="lblTicketNo' + id + '">' + tcktNo + '</label>
98. </td>' +
99. '
100. <td>
101. <label id="lblPrice' + id + '" >' + Price + '</label>
102. </td>' +
103. '
104. <td>
105. <input type="button" class="btn btn-warning" id="btnEdit' + id + '" onclick="EditTicket(' + id + ')" value="Edit" /> ' +
106. '|
107. <input type="button" class="btn btn-danger" id="btnDelete' + id + '" onclick="DeleteTicket(' + id + ')" value="Delete" />
108. </td>
109. </tr>'
110. $("#tbl").append(tblRow);
111. }
113. function DeleteTicket(id)
114. {
115. $("#row" + id).remove();
116. }

Reference Articles for AngularJS:

jQueryDynamically append RowsTable with JQuery

14 Comments

Join the conversation! Your thoughts help the community grow.

Harish Batchu8y ago
Can you share the code files.
HARRY PATEL8y ago
Save event Method code Missing share that code also
Elavarasan M8y ago
Hi Saveevent Method code Missing share that code also
Thenmozhi Viswanathan8y ago
Save to server code is missing. could you please share details for the same
James Moje8y ago
The function to save the table is missing, kindly help me with this one. Thanks in advance
Sonu Chaudhary10y ago
good one...
Ketak Bhalsing10y ago
Helpful information....
Humayun Kabir Mamun10y ago
Nice...
Thiruppathi R10y ago
Nice Share.
Raja T10y ago
Good, Thansk for sharing
Vignesh Mani10y ago
Nice one
Debasis Saha10y ago
Good One..
Bhuvanesh Mohankumar10y ago
Good one
Ajay Malik10y ago
nice..