Sometimes we come across a requirement where we do not want to use a grid control, as it may be an overhead and may be too heavy for the job.
And we just need the basic functionality of a grid, and want to embed into a plain table.
The following is just a representation, not a demo
Insert Row

Name	City	Occupation	Action
Naveen	Jaipur	S/w Developer	Edit | Delete
Ashish	Delhi	Musician	Edit | Delete

This can be achieved by following steps (easily):

Step-1: Html markup required:

 

 

<button id='insertRow'>Insert Row</button>

<table id='RecordsTable' class='table table-striped table-bordered'>
                <tr><th>Name</th><th>City</th><th>Occupation</th><th>Action</th></tr>
                <tr class='recRow'><td>Naveen</td><td>Jaipur</td><td>S/w
 Developer</td><td  class='actions'><a href='#' 
class='editRecord'>Edit</a> | <a href='#' 
class='delRecord'>Delete</a></td></tr>

                <tr class='recRow'><td>Ashish</td><td>Delhi</td><td>Musician</td><td
 class='actions'><a href='#' class='editRecord'>Edit</a> |
 <a href='#' class='delRecord'>Delete</a></td></tr>

</table>

 

Step-2: Javascript part:

1. We want to insert a blank row, on clicking insert row button:

 

var adding=false; // used to prevent multiple addition of blank rows
var $recordsTable=$('#RecordsTable');
$('#insertRow').click(function(){
if(!adding){
    var newRow=$('<tr class="recRow"></tr>');
    var inRow=$("<td><input type='text' class='nName' />"+
            "</td><td><input type='text' class='nCity' />"+
            "</td><td><input type='text' class='nOccupation' /></td>"+
            "<td  class='actions'><a href='#' class='addRecord'>Add</a></td></tr>");
    newRow.append(inRow);
    $recordsTable.append(newRow);
    adding=true;
}
});

 

 

2. Now on clicking save, we want new data to be added to our table structure.

 

$recordsTable.on('click','.addRecord',function(){
    var currentRow=$(this).closest('.recRow');
    var newRow=$('<tr class="recRow"></tr>');
    var newCol=$('<td></td>');
    newCol.html(currentRow.find('.nName').val());
    newRow.append(newCol);
    newCol=$('<td></td>');
    newCol.html(currentRow.find('.nCity').val());
    newRow.append(newCol);
    newCol=$('<td></td>');
    newCol.html(currentRow.find('.nOccupation').val());
    newRow.append(newCol);
    newCol=$("<td class='actions'><a href='#' class='editRecord'>Edit</a> | <a href='#' class='delRecord'>Delete</a></td>");
    newRow.append(newCol);
    currentRow.remove();
    $recordsTable.append(newRow);
    adding=false;
});

 

 

3. On delete, the row should be removed.

 

$recordsTable.on('click','.delRecord',function(){
     $(this).closest('.recRow').remove();
});

 

 

4. On Edit the row should be converted to editable row.

 

var beforeEditActions;  //to hold 'edit' and 'delete' links at the time of editing
$recordsTable.on('click','.editRecord',function(){
    var currentRow=$(this).closest('.recRow');
    currentRow.find("td").contents().wrap(function(i,e){
        if(!$(this).parent().hasClass('actions')){
            return "<input type='text' value='"+$(this).text()+"' />";
        }else{
            beforeEditActions=$(this).parent().contents();
           $(this).parent().html('<a href="#" class="updateRecord">Save</a>');
         }
    });
});

 

 

5. On click of save the data should be updated.

 

$recordsTable.on('click','.updateRecord',function(){
    var currentRow=$(this).closest('.recRow');
    currentRow.find("td").contents().each(function(i,e){
        var par=$(this).parent();
        if(!par.hasClass('actions')){
            var newVal=$(e).val();
             par.html(newVal);
        } else
             par.html(beforeEditActions);
    });
});

 

 

 

 

And you are good to go.

The above is a very basic example to get you started.

Hope it helped you... :)