Dynamically Append Rows to the Table with JQuery

Sahil Saini
8y
17k
0
3

100

Article

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:

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all