jQuery 实现 九九乘法表

突然看到了这么一道题。我想试试。

HTML 结构

<h1>九九乘法表</h1><h2>Demo 1</h2><div id="Feng9" class="cfb"></div><h2>Demo 2</h2><div id="Feng92" class="cfb"></div><h2>Demo 3</h2><div id="Feng93" class="cfb"><ul></ul></div>

CSS 代码

.cfb {  border-bottom: 1px solid #ddd;  text-align: center; }  .cfb ul {    clear: both;    overflow: hidden;    border-left: 1px solid #ddd; }    .cfb ul li {      float: left;      width: 69px;      border-top: 1px solid #ddd;      border-right: 1px solid #ddd;      color: #999; }    .cfb ul em {      font-weight: bold;      color: #f60; }

jQuery 代码

$(function(){    // 实现方法 1    var Obj = $("#Feng9");    for (var i = 1; i <= 9; i++) {        Obj.append('<ul><li data-i='+i+'>1×'+i+'=<em> '+i+'</em></li></ul>');    };    var Ul = Obj.children('ul');    Ul.each(function() {        var T = $(this),            Dt = T.children('li'),            I = Dt.data("i");        for (var i = 2; i <= I; i++) {            T.append('<li>'+i+'×'+I+'=<em> '+i*I+'</em></li>');        };    });    // 实现方法 2    var Obj2 = $("#Feng92");    for (var i = 1; i <= 9; i++) {        Obj2.append('<ul class="ul_'+i+'"><li>1×'+i+'=<em> '+i+'</em></li></ul>');        for (var j = 2; j <= i; j++) {            Obj2.children('.ul_'+i+'').append('<li>'+j+'×'+i+'=<em> '+j*i+'</em></li>')        };    };    // 实现方法 3    var Obj3 = $("#Feng93").children('ul');    for (var i = 1; i <= 9; i++) {        for (var j = 1; j <= i; j++) {            if (i==j) {                Obj3.append('<li>'+j+'×'+i+'=<em> '+j*i+'</em></li></ul><ul>')            } else {                Obj3.append('<li>'+j+'×'+i+'=<em> '+j*i+'</em></li>');            }        };    };});

虽然是三个方法，其原理都是一个，下回看看能不能换个原理实现这东西。