<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>九九乘法表</title>

 </head>

 <body>

     <input type="number" id="userinput">

     <input type="button" id="queR" value="确认">

     <table border="1"></table>

     <script>

         function off(num=9){//创建一个函数

             for(let i=1;i<=num;i++){

                 let tr=document.createElement("tr");//创建tr;

                 for(let j=1;j<=i;j++){

                     let td=document.createElement("td")//创建td

                     td.innerHTML+=`${i}*${j}=${i*j}  `;//把i*j=ij的过程赋值给td里面

                     tr.appendChild(td);//把td添加到tr里面

                 }

                 document.querySelector("table").appendChild(tr);//找到table把tr添加到table里面

             }

         }

         queR.onclick=function(){//点击quer的时候里都为空值，在重新赋值；

             document.querySelector("table").innerHTML="";

             off(userinput.value-0);

         }

     </script>

 </body>

 </html>




												


											
九九乘法表，全js编写，放入table表格带入页面渲染出来的更多相关文章
	

    
								
  1. js九九乘法表的应用
		
    <html> <head> <meta charset=utf-8" /> <title>js九九乘法表</title> < ...
    
		
    2. 
						
  2. 记得初学JS时候练个九九乘法表都写的要死要活
		
    还记得当初刚接触JS时候,看到视频中老师写了个九九乘法表,觉得好神奇,可是自己在下面动手写了半天还是有各种问题,甚是懊恼啊.今又看到园子里有关于乘法表的博文,出于对过去的不舍与缅怀,遂重写一遍. &l ...
    
		
    3. 
						
  3. 用Python编写九九乘法表考虑print自动换行问题
		
    编写了一个简单的小程序九九乘法表,代码如下: for i in range(1,10): for j in range(1,i+1): print(" %d*%d=%d" % (j ...
    
		
    4. 
						
  4. JS实现上下左右对称的九九乘法表
		
    JS实现上下左右对称的九九乘法表 css样式 <style> table{ table-layout:fixed; border-collapse:collapse; } td{ padd ...
    
		
    5. 
						
  5. 用JS写九九乘法表
		
    本来JS部分觉得就不是很好,结果经过一个寒假,在家的日子过的太舒适,基本把学的都快忘干净了,今天老师一说九九乘法表,除了脑子里浮现出要满足的条件,其他的都不记得了,赶快整理了一下: <scrip ...
    
		
    6. 
						
  6. python编写九九乘法表代码
		
    打印九九乘法表 代码: #!/usr/bin/env python # -*- coding: UTF-8 -*- # 项目二: # 1.要求:编写九九乘法表 # 2.分析: # 根据九九乘法表的样式 ...
    
		
    7. 
						
  7. 使用VS2017进行Python代码的编写并打印出九九乘法表
		
    我们来盘一盘怎么使用VS2017进行python代码的编写并打印出九九乘法表. 使用Visual Studio 2017进行Python编程不需要太复杂的工作,只需要vs2017安装好对Python的 ...
    
		
    8. 
						
  8. 用js实现打印九九乘法表
		
    用js在打印九九乘法表 思考 在学习了流程控制和条件判断后,我们可以利用js打印各式各样的九九乘法表 不管是打印什么样三角形九九乘法表,我们都应该找到有规律的地方,比如第一列的数字是什么规律,第一行的 ...
    
		
    9. 
						
  9. 编写Java程序，使用循环结构打印出九九乘法表
		
    编写Java程序,使用循环结构打印出九九乘法表 效果如下: 实现代码: public class Multiplication99 { public static void main(String[] ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Django objects.all() ,objects.get() ,objects.filter()之间的区别
			
    ret=UserInfo.objects.all() all返回的是QuerySet对象,程序并没有真的在数据库中执行SQL语句查询数据,但支持迭代,使用for循环可以获取数据. ret=UserIn ...
    
			
    2. 
						
  2. 第二课，DOS常用命令及进制转换
			
    课后的一点小总结还望各位大神点评. 注意事项:1.不要在c盘进行操作. 2.要注意路径. 3.要熟练掌握DOS命令 操作指令(.在本文代表空格,本次以文档为例) 打开DOS:窗口键+r  输入cmd  ...
    
			
    3. 
						
  3. JavaScript学习---JavaScript基础知识
			
    JavaScript的引入方式 JavaScript的引入方式: 1.直接在script里面写: 2.使用<script src="JS的文件位置"> {#1 直接编写 ...
    
			
    4. 
						
  4. MySQL -Naivacat工具与pymysql模块
			
    Navicat 在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作MySQL数据库. 官网下载:https ...
    
			
    5. 
						
  5. WCF已超过传入消息(65536)的最大消息大小配额。若要增加配额，请使用相应绑定元素上的 MaxReceivedMessageSize 属性
			
    <?xml version="1.0" encoding="utf-8"?> <configuration> <connectio ...
    
			
    6. 
						
  6. CentOS 6 各种启动文件损坏及修复
			
    stage1 mbr的破坏和恢复 清空mbr 前446字节 dd if=/dev/zero of=/dev/sda bs=1 count=446 如果没有挂载启动光盘,会显示这样 如果启动前挂载了光盘 ...
    
			
    7. 
						
  7. December 06th 2016 Week 50th Tuesday
			
    Behind every beautiful thing, there is some kind of pain. 美丽背后,必有努力. No pains, no gains. But it seem ...
    
			
    8. 
						
  8. Maven 阿里源
			
    由于一些不可抗拒因素,在使用 maven 的时候我们不得不需要改变一些设置,以加快我们的下载速度. ​ 仓库配置 ​ 在maven的settings.xml文件里的mirrors节点,添加如下子节点: ...
    
			
    9. 
						
  9. js图形库
			
    SVG.js viz.js graphviz的js实现版 raphael d3 (http://d3js.org/) JavaScript InfoVis Toolkit Flotr2 and Env ...
    
			
    10. 
						
  10. Angular  Reactive Forms -- Model-Driven Forms响应式表单
			
    Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )  官方文档:https://v2.angul ...
    
			
    11.