jquery打99乘法表_jquery 九九乘法表代码

我们提供了一款用jquery实现的一个九九乘法表程序代码哦。

$(document).ready(function(){

$("

").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(

$("

").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 = "

for(var i = 1;i <= 9;i++){

table += "

";

for(var j = 1;j <= 9;j++){

var data = (j <= i ? "" + i + " * " + j + " = " + i*j : "");

table += "

" + data + "";

}

table += "

";

}

table += "

";

$("body").append(table);

下面是一段简单的写法