$(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);
下面是一段简单的写法