Dynamically Add and Delete Table Rows Using Jquery

In this post we will see how to build html table dynamically using jQuery , here in this tutorial we will add rows to table on click of add button ,which will be placed at the last row of the table and every row of the table containing a remove button which will delete that particular row on click .

You can find this script which i have used in one of  the tutorial  Live Table Insert Update Delete 


 <link rel="stylesheet" type="text/css" href="style.css">
  <script src='jquery-1.7.1.min.js'></script>
  <script src='buildtable.js'></script>
<table border='1' cellspacing='5' cellpadding='5' id='mytable'>

  <th>Header 1</th>
  <th>Header 2</th>
  <th>Header 3</th>


<tr >
  <td colspan='4' style='text-align:right'><input type="button" value="Add" id="add_item" />


<div style='margin-left:180px;margin-top:5px;'>



    //add event
         var newRow="<tr>"+
                               "<td><input type='button' class='delete' value='remove'  ></td>"+
         $("#mytable tr:last").before(newRow);

    //remove event

No comments:

Post a Comment