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(){// 实现方法 1var 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>');};});// 实现方法 2var 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>')};};// 实现方法 3var 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>');}};};
});

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

jQuery 实现九九乘法表相关推荐

jquery打99乘法表_基于javascript实现九九乘法表
基于javascript实现九九乘法表本文实例为大家分享了javascript实现九九乘法表的相关代码,具体内容如下 var sum=0; var wite; for (var i = 1; i & ...
jquery实现99乘法表的动态显示
主要实现的功能是点击完按钮以后,页面打印九九乘法表. 使用的jquery的版本为1.10.2 <%@ page language="java" contentType=&qu ...
九九乘法表(js_javascript)
文具盒正品:九九乘法表源码:我用的[jQuery] <!DOCTYPE html> <html lang="en"><head><met ...
最简单的九九乘法表打印
思前考后,目前能做的代码量最少的九九乘法表,在之前的基础上进阶:17行代码实现打印九九乘法表 <!DOCTYPE html> <html><head><met ...
php一个循环九九乘法表代码_php双层循环(九九乘法表)
php双层循环(九九乘法表) 实例如下: echo " for($i=1;$i<=9;$i++) //控制每行 { echo " "; //输出一行 for($j= ...
c语言金字塔输出乘法表,python中打印金字塔和九九乘法表的几种方法
# 打印九九乘法表 for i in range(1,10): for j in range(1,i+1): # x=i*j # print(i,'*',j,'=',x,end=' ') print( ...
python3输出九九乘法表,python3：简单4步骤输出九九乘法表
如何输出一个九九乘法表,使用python语言,嵌套循环,4行代码就可以实现,瞬间感觉python真的很简单~ 代码: for i in range(1,10): for j in range(1,i+ ...
android页面布局4*4乘法表,day4（分支结构，循环结构，for循环，九九乘法表）
一:复习 ''' 1.变量名命名规范 -- 1.只能由数字.字母及 _ 组成 -- 2.不能以数字开头 -- 3.不能与系统关键字重名 -- 4._开头有特殊含义 -- 5.__开头__结尾的变量, ...
python学习之循环语句的九九乘法表
while 语句的九九乘法表: ##九九乘法表 #总共有九行# 每行中的列数,就是当前所处的行号#乘式的第一个数代表的是列,第二个数代表的是行 row = 1#行column = 1#列while r ...
九九乘法表Python+Java，你知道多少？
Python: Python就是精简 Python九九乘法表 JAVA: 没装Eclipse.就用Notepad++来编写.如下.需要注意设置编码格式转为ANSI格式,否则会出现中文乱码在CMD中 ...

jQuery 实现九九乘法表

HTML 结构

CSS 代码

jQuery 代码

jQuery 实现九九乘法表相关推荐

最新文章

热门文章

jQuery 实现 九九乘法表

HTML 结构

CSS 代码

jQuery 代码

jQuery 实现 九九乘法表相关推荐

最新文章

热门文章

jQuery 实现九九乘法表

jQuery 实现九九乘法表相关推荐