Insert dynamic row in table using jquery

Insert dynamic row in table using jquery

In this tutorial,I will show how to insert dynamic row in table using jquery.
dynamically add row in table using jquery is very simple as jQuery provides clone() function to clone HTML elements. Using this function we can clone a row and add this row to table using insertBefore() function.

For adding dynamic row in table, we have used insertRow() and clone() method.
Example:
<html>
<title>Add row dynamically using jquery</title>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
   //addRow():This is very simple javascript function using jQuery library for adding dynamic html table row on user click.
function addRow(){
    $('#table_id tr:last').clone(true).insertAfter('#table_id tr:last');
   $('#table_id tr:last input').val("");
   $('#table_id tr:last input:first').focus();
   }
   </script>
</head>
<body>
<table id="table_id" width="100%">
         <thead>
            <tr>
             <td >Name :</td>
              <td >
<input type="text" name="name" value="name" />
             </td>
            </tr>
         </thead>
   </table>
<br />
<a href=javascript:void(0);  onclick="javascript:addRow()">Add Row</a>
</body>
</html>