主要实现的功能是点击完按钮以后,页面打印九九乘法表。
使用的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>