Tuesday, 16 September 2014

Rows dynamically added to html table


Based on entering the textfield number of rows dynamically added to the table.

html:

<input type="text" id="itemsCount"/>

Script:

<script>
$(function(){
$('#itemsCount').keyup(function(){
   if(!isNaN($('#itemsCount').val())){
    var rowCount = $("#itemsTable tbody tr").length;
    if(rowCount == 0){
    $('#itemsTable tbody').empty();
for(var i = 1; i <= $('#itemsCount').val(); i++)
$('#itemsTable tbody').append("<tr><td>"+i+" Row</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>");
}
    else if(rowCount > 0){
    for(var i = rowCount; i <= $('#itemsCount').val(); i++)
$('#itemsTable tbody').append("<tr><td>"+i+" Row</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>");
    }
}
   else $('#itemsCount').val('');
});
});
</script>

No comments:

Post a Comment