一个用纯jquery打出99乘法表的代码

今天群里有人问这个问题，觉得挺有意思，好像当年写lisp一样，于是试了试。。

没有用一句非jquery代码（+ -号是有的），可以打印出一个完整的99乘法表

有兴趣的试运行一下，效果挺好玩的。


$(document).ready(function(){    
  $("<div>").data('RowNum',9).css('margin','10px')
            .appendTo(document.body)
            .bind('Rows',function(){            
              $(this).parent().find("div:lt("+ ($(this).data('RowNum')) +")").eq(0)
                                         .css('margin',10 + $(this).data('RowNum')*2 + 'px')
                                     .css('opacity','0.1').animate({opacity:'0.99'},200,function(){
                       $(this).before($(this).clone(true).data('RowNum',$(this).data('RowNum') - 1))
                       .unbind('Rows')
                       .append(
                         $("<p>").data('ColumnNum',$(this).data('RowNum')).width(20).height(20)
                           .css('display','inline')
                           .appendTo($(this))
                           .bind('Columns',function(){
                              $(this).text(($(this).data('ColumnNum')) +
                                            "x" +
                                            ($(this).parent().data('RowNum')) +
                                            "=" +
                                            ($(this).data('ColumnNum'))*($(this).parent().data('RowNum'))
                                          ).css('color',
                                                                                            'RGB('+ $(this).data('ColumnNum') * $(this).data('ColumnNum') * 3 + ','
                                                                                                            + ($(this).parent().data('RowNum') + $(this).data('ColumnNum')) * 10 + ','
                                                                                                          + $(this).parent().data('RowNum') * $(this).parent().data('RowNum') * 2 + ')')
                                                                                     .css('margin-left',
                                                                                              $(this).data('ColumnNum')*$(this).parent().data('RowNum') + 'px')
                                           .parent().find("p:lt("+ ($(this).data('ColumnNum')-1) +")").eq(0)
                                                                               .css('opacity','0.1')
                                                                               .animate({opacity:'1.00'},
                                                                                                 $(this).data('ColumnNum')*$(this).parent().data('RowNum')*40,
                                                                                                 function(){
                                                                                               $(this).before($(this).clone(true).data('ColumnNum',$(this).data('ColumnNum') - 1))
                                                                                                                .unbind('Columns')
                                                                                                                .parent().find("p").eq(0).triggerHandler('Columns')
                                                                                                        })
                                                                                                }).triggerHandler('Columns')
                                                                             ).parent().find("div").eq(0).triggerHandler('Rows')
                                                                        })
                                                         }).triggerHandler('Rows');
});

楼主幸苦了
但是这样的代码实在不应提倡啊
jQuery应该是合理使用而不是尽用

    var table = "<table>"
    for(var i = 1;i <= 9;i++){
        table += "<tr>";
        for(var j = 1;j <= 9;j++){
            var data = (j <= i ? "" + i + " * " + j + " = " + i*j : "");
            table += "<td>" + data + "</td>";
        }
        table += "</tr>";
    }
    table += "</table>";
    $("body").append(table);

呵呵，用纯jq写还真不容易啊

顶下

唯一的好处就是对JQ的各个属性方法熟悉度上增加