jquery实现99乘法表的动态显示
生活随笔
收集整理的這篇文章主要介紹了
jquery实现99乘法表的动态显示
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
主要實(shí)現(xiàn)的功能是點(diǎn)擊完按鈕以后，頁面打印九九乘法表。
使用的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(){ //移動(dòng)到該處時(shí)，字體變紅色$(this).css("color","red");});$(td).on("mouseleave", function(){$(this).css("color","black");});td.appendTo(tr);}tr.appendTo(table);}if($("table").size()==0) //用size判斷，在生成table后，點(diǎn)擊按鈕，不在生成table.appendTo(showTable);});}); </script> </head> <body> <div id="showTable"> </div> <button id="mul" >點(diǎn)擊顯示</button> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/sjy123/p/4702810.html
總結(jié)
以上是生活随笔為你收集整理的jquery实现99乘法表的动态显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 4路外线（NAT+PBR真实案例）
- 下一篇： 基于jQuery可悬停控制图片轮播代码