jquery - 如何以交互方式使用 .append() 在矩阵中添加列

Question

我正在尝试开发一个页面，在该页面中，用户可以在矩阵的两个文本字段中输入行和列，因为用户类型行和列是交互式创建的。

我面临的问题是列不是交互式创建的

    $(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

您可以使用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>");
    }
});

这不起作用，因为您还需要获取列。您还需要扩展它$('input#b')。

更新

试试这个代码...

$(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);
});