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: