<!--小练习,练习使用循环实现一个九九乘法表
第一步,最低要求:在Console中按行输出 n * m = t
然后,尝试在网页中,使用table来实现一个九九乘法表
-->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td {
width: 200px;
height: 40px;
border: 1px solid #CCCCCC;
}
tr {
text-align: center;
}
</style>
</head>
<body>
<!--小练习,练习使用循环实现一个九九乘法表
第一步,最低要求:在Console中按行输出 n * m = t
然后,尝试在网页中,使用table来实现一个九九乘法表
--> <table>
<th>九九乘法表</th> </table> <script> for(var i=1;i<=9;i++){
var str="";
var arr=[];
var tr=document.createElement("tr");
for(var j=1;j<=i;j++){
str=i+"*"+j+"="+i*j;
arr.push(str);
// console.log(arr);
var td=document.createElement("td");
tr.appendChild(td);
td.innerHTML=arr[j-1]; //注意这里是j-1 因为当i=1 j=1的时候 由于 arr[1]不存在 所以会报错
//console.log(str);把每次内部循环的结果也都输出了 第一行:3*1=3 第二行:3*1=3 3*2=6 第三行:3*1=3 3*2=6 3*3=9
}
//
// console.log(str); //将一次外循环作为一次输出
var table=document.getElementsByTagName("table")[0];
table.appendChild(tr);
} </script>
</body>
</html>

JS在页面输出九九乘法表的更多相关文章

  1. JSP页面输出九九乘法表--JSP基础

    index.jsp: <%@ page language="java" import="java.util.*" pageEncoding="U ...

  2. 使用JSP脚本在页面输出九九乘法表

    <% int i,j; for(i=1;i<10;i++) { for(j=1;j<=i;j++) { out.println(i+"*"+j+"=&q ...

  3. 使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表

    查看本章节 查看作业目录 需求说明: 在页面上输出九九乘法表,实现效果如图所示 实现思路: 创建HTML页面 在页面中嵌入 <script type="text/javascript& ...

  4. JavaWeb 输出九九乘法表,三角形,菱形

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. For循环输出九九乘法表

    题:使用For循环输出九九乘法表 解析: 1*1=1 1*2=2  2*2=4 1*3=3  2*3=6  3*3=9 .... 1*9=9  ........ .....9*9=81 可以看做j*i ...

  6. 输出九九乘法表(Python、Java、C、C++、JavaScript)

    最近在学python的过程中,接触到了循环的知识,以及这个案例,于是写了下!感觉还不错,然后就用其它几种语言也试了下!! 接下来,就跟大家分享下实现方法!! 实现输出九九乘法表,主要用到的是循环的知识 ...

  7. python学习:输出九九乘法表

    输出九九乘法表 代码: num1 = 1while num1 <= 9: num2 = 1 while num2 <= num1: print(str(num2)+"*" ...

  8. shell脚本输出九九乘法表

    #!/bin/bash#输出九九乘法表 for ((i=1;i<=9;i++)) do for ((j=1;j<=$i;j++)) do echo -n $j'x'$i=$(($i*$j) ...

  9. Python练习题 006:输出九九乘法表

    [Python练习题 006] 输出九九乘法表 --------------------------------------------------- 照理这题不难,逻辑关系弄对了就好办,但数学渣的我 ...

随机推荐

  1. 高效编程之 多线程Event

    Event 简介 Event 事件 是线程间通信的最简单方法之一,主要用于线程同步. 处理机制 定义一个全局内置标志Flag,如果Flag为False,执行到 event.wait 时程序就会阻塞,如 ...

  2. Chrome浏览器记住密码后input框黄色背景且背景图片不显示的问题

    Chrome浏览器记住密码后再进入登录页后,输入框背景颜色变为黄色,字体颜色变成#000黑色,且添加的背景图片也那不显示了,进入审查元素后,发现浏览器默认给输入框添加了样式,并且无法通过importa ...

  3. Scala学习笔记(5)类

    1.简单类和无参方法 calss Counter{ private var value = 0  //必须初始字段 def increment(){value +=1} //方法默认是公有的 def ...

  4. java字符流读取文件

    package ba; import java.io.*; public class zifuTest { public static void main(String[] args) { FileI ...

  5. react-native样式引入

    react-native 第一种:在标签内部使用样式 import React from 'react'; class Demo extends React.Component{ render(){ ...

  6. myeclipse2014下卸载,安装maven插件。

    转自:https://blog.csdn.net/gaoshang10/article/details/21177893 一.卸载方法: 点击Help->About Myeclipse Ente ...

  7. ids

    https://www.cnblogs.com/wyt007/p/8309377.html

  8. Shell编程变量

    shell变量 什么是变量,存放了各种数据,在linux怎么定义了变量,name=ken,name就是变量名,ken就是变量值, 但是在shell中,有三种方式: name=ken name='ken ...

  9. UVa10426

    GCD Extreme(II) Input: Standard Input Output: Standard Output Given the value of N, you will have to ...

  10. spring jpa 带参数分页查询(一)

    1.写个接口继承JpaRepository @NoRepositoryBean public interface BaseRepository<T,PK extends Serializable ...