Question

I am trying to develop a page where user can enter row and columns in two text fields for matrix as user types rows and colums are created interactively.

the issue i face is columns are not created interactively

    $(document).ready(function(){  
    var rowcount=0,columncount=0;                                                    
    $('input#a').bind('keyup',function() {                                         
    $('table#row').empty();                                                    

    rowcount=parseInt($(this).val())||0;                                       

    for(var i=0;i<rowcount;i++)                                                
    {                                                                          
        $('table#row').append("<tr><td>"+0+"</td></tr>");                      

       $('input#b').bind('keyup',function() {                                  

           $('table#row').empty();                                          

           columncount=parseInt($(this).val())||0;                                

           for(var i=0;i<columncount;i++)                                         
           {                                                                   
               $('table#row').append("<td>"+0+"</td>");                     
           }                                                                   
       });                                                                     
    }                                                                          
});                                                                            

});                                                                            


<table id="row">
    //interactive rowcolumn generation here
</table>

Answer 1

You can use empty().

$('input#a').bind('keyup',function() {

    $('table#row').empty();

    rowcount=parseInt($(this).val())||0;

    for(var i=0;i<rowcount;i++)
    {
        $('table#row').append("<tr><td>"+0+"</td></tr>");
    }
});

This won’t work as such because you need to get the columns also. You need to extend this for $('input#b') also.

Update

Try this code…

$(document).ready(function(){  
    var rowcount=0,columncount=0;                                                    

    function createTable() {
        console.log("GGG");
        $('table#row').empty();                                                    

        rowcount = parseInt($("input#a").val()) || 0;    
        columncount = parseInt($("input#b").val()) || 0;        

        for(var i=0;i<rowcount;i++)                                                
        {                                                                          
            $('table#row').append("<tr><td>"+0+"</td></tr>");                      
        }   

        $('table#row tr').each(function() {
            $(this).empty();

            for(var i=0;i<columncount;i++)                                         
            {                                                                   
                $(this).append("<td>"+0+"</td>");                   
            }   
        });
    }

    $('input#a').bind('keyup', createTable);
    $('input#b').bind('keyup', createTable);
});