jquery实现99乘法表的动态显示
生活随笔
收集整理的这篇文章主要介绍了
jquery实现99乘法表的动态显示
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
主要实现的功能是点击完按钮以后，页面打印九九乘法表。
使用的jquery的版本为1.10.2
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){$("#mul").click(function(){var table=$("<table></table>");for(var i=1;i<=9;i++){var tr=$("<tr></tr>");for(var j=1;j<=i;j++){var td =$("<td>"+i+"*"+j+"="+i*j+"</td>");$(td).on("mouseenter", function(){ //移动到该处时，字体变红色$(this).css("color","red");});$(td).on("mouseleave", function(){$(this).css("color","black");});td.appendTo(tr);}tr.appendTo(table);}if($("table").size()==0) //用size判断，在生成table后，点击按钮，不在生成table.appendTo(showTable);});}); </script> </head> <body> <div id="showTable"> </div> <button id="mul" >点击显示</button> </body> </html>
转载于:https://www.cnblogs.com/sjy123/p/4702810.html
总结
以上是生活随笔为你收集整理的jquery实现99乘法表的动态显示的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 4路外线（NAT+PBR真实案例）
- 下一篇： 基于jQuery可悬停控制图片轮播代码