jQuery 实现 九九乘法表
2015-09-06 16:54
567 查看
突然看到了这么一道题。我想试试。
虽然是三个方法,其原理都是一个,下回看看能不能换个原理实现这东西。
HTML 结构
[code]<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 代码
[code].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 代码
[code]$(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>'); } }; }; });
虽然是三个方法,其原理都是一个,下回看看能不能换个原理实现这东西。
相关文章推荐
- 基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
- 解决$.ajax()请求异常~ jQuery提示parsererror错误解决办法
- jQuery横向擦除焦点图特效代码分享
- jquery封装的时间轴
- jquery无缝滚动效果
- jquery删除操作option
- jquery浮动定位层导航描点上下滚动的浮动导航
- jquery的优势
- jQuery Ajax 跨域请求
- jQuery实现美观的多级动画效果菜单代码
- jQuery使用get()方法访问经典的DOM
- jquery选择器
- 关于JQuery设置checkbox checked 的问题
- Jquery中$.each()与$().each()的使用与区别。
- jquery基础(7)动画特效
- jquery选择器
- Jquery中的$.cookie()方法
- jquery获取当前元素的坐标
- 在jquerymobile实现listview局部渲染的方法: listviewcannot call methods on listview prior to initialization; att
- jQuery的Cookie封装,与PHP交互