【www.gdgbn.com--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);
下面是一段简单的写法