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

时间:2013-01-28 16:08:33

标签: jquery

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

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

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

1 个答案:

答案 0 :(得分: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);
});