Dynamic Row Addition

This was used by one of the module to add dynamic rows into the application.

by shivkumarganesh

HTML

<table id="copntentTable">
</table>
<br>
<input id="sumbitButton" type="submit" value="Add Row"/>

CSS

table, td
{
    border-color: 'transparent';
    border-style: solid;
}

table
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
}

td
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
    background-color: #FFC;
}

JavaScript

var trno = 0;
$('#sumbitButton').click(function() {
   
    $('#copntentTable').append('<tr id="tableName-'+trno+'"><td><select><option>Hello World</option></select></td><td><select><option>Hello World</option></select></td><td><select><option>Hello World</option></select></td>    <td><select><option>Hello World</option></select></td><td><img id="delbutt-'+trno+'"/></td></tr>');
    $('img').attr({
        'height': '20px',
        'width': '20px',
        'src': 'http://icongal.com/gallery/image/270480                 /quit_delete_close_exit_terminate_cancel_error_edit_like_question.png',
        'style': 'cursor:pointer',
        'class': 'removeImg'
    });
    trno++;
});



$('.removeImg').live('click', function() {
     var remove = $(this).attr('id').split('-')[1]; 
    $('#tableName-'+remove).fadeOut('slow',function(){
          $(this).remove();            
    });
});