Post
Ask Question

Dynamically Append Rows to the Table with JQuery

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>  
    2.   
    3. <head>  
    4.     <title></title>  
    5. </head>  
    6.   
    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>  
    109.   
    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. }    
    27.     
    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. }    
    57.     
    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. }    
    84.     
    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. }    
    112.     
    113. function DeleteTicket(id)    
    114. {    
    115.     $("#row" + id).remove();    
    116. }    

Reference Articles for AngularJS:


Similar Articles