[Js高手之路第一部]JavaScript上百例实战【新版】_9 javascript二重循环乘法表与n行n列的表格

0.隔行变色的表格

HTML style 属性实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         table {
 8             /*合并单元格之间的线*/
 9             border-collapse: collapse;
10         }
11         th,td {
12             border: 1px solid #ccc;
13             padding: 5px;
14             width: 50px;
15             height: 50px;
16         }
17     </style>
18     <script>
19         //输出10行10列的表格
20         document.write("<table>");
21         for (var i=0;i<10;i++) {
22             if (i%2==0) {
23                 document.write("<tr style=‘background-color:#666;‘>");
24             }
25             else {
26                 document.write("<tr style=‘background-color:#aaa;‘>");
27             }
28             for (var j=0;j<10;j++) {
29                 document.write("<td>&nbsp;</td>");
30             }
31             document.write("</tr>");
32         }
33         document.write("</table>");
34     </script>
35 </head>
36 <body>
37
38 </body>
39 </html>

1.隔行变色的表格

先HTML style 属性,后HTML class 属性实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         table {
 8             /*合并单元格之间的线*/
 9             border-collapse: collapse;
10         }
11         th,td {
12             border: 1px solid #ccc;
13             padding: 5px;
14             width: 50px;
15             height: 50px;
16         }
17         .even {
18             background: #aaa;
19         }
20         .odd {
21             background: #333;
22         }
23     </style>
24     <script>
25         //输出10行10列的表格
26         document.write("<table>");
27         for (var i=0;i<10;i++) {
28             if (i%2==0) {
29                 document.write("<tr class=‘odd‘>");
30             }
31             else {
32                 document.write("<tr class=‘even‘>");
33             }
34             for (var j=0;j<10;j++) {
35                 document.write("<td>&nbsp;</td>");
36             }
37             document.write("</tr>");
38         }
39         document.write("</table>");
40     </script>
41 </head>
42 <body>
43
44 </body>
45 </html>

2.奇数&偶数行加上边框

输出10个div

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             padding: 10px;
 9             margin: 10px;
10             border: 1px solid #000;
11         }
12     </style>
13     <script>
14         //输出10个div
15         for (var i=0;i<10;i++) {
16             if (i%2==0) {
17                 document.write("<div style=‘border:2px solid blue;‘></div>");
18             }
19             else {
20                 document.write("<div style=‘border:2px solid red;‘></div>");
21             }
22         }
23
24     </script>
25 </head>
26 <body>
27
28 </body>
29 </html>

3.乘法表

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         table {
 8             /*合并单元格之间的线*/
 9             border-collapse: collapse;
10         }
11         th,td {
12             border: 1px solid #ccc;
13             padding: 5px;
14         }
15     </style>
16     <script>
17         //输出乘法表
18         document.write("<table>");
19         for (var i=1;i<10;i++) {
20             document.write("<tr>");
21             for (var j=1;j<=i;j++) {
22                 document.write("<td>"+i+" x "+j+" = "+(i*j)+"</td>");
23             }
24             document.write("</tr>");
25         }
26         document.write("</table>");
27     </script>
28 </head>
29 <body>
30
31 </body>
32 </html>

原文地址:https://www.cnblogs.com/denggelin/p/8999093.html

时间: 2024-10-12 01:15:46

[Js高手之路第一部]JavaScript上百例实战【新版】_9 javascript二重循环乘法表与n行n列的表格的相关文章

[Js高手之路第一部]JavaScript上百例实战【新版】_1 js代码三种书写方式

小结: javascript使用的3种方式: 1,页面script方式 2,行间事件触发 3,外部引入方式 1,页面script方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 alert(1); 8 <

[Js高手之路第一部]JavaScript上百例实战【新版】_3 javascript变量的类型

JavaScript 数据类型 字符串.数字.布尔.数组.对象.Null.Undefined 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 //变量的类型由 变量的值来决定 8 // 弱类型语言 9 10 //字符串类型, 用引

[Js高手之路第一部]JavaScript上百例实战【新版】_2 javascript变量命名&amp;使用规则

变量 1,什么是变量 变量是内存中用来存储数据的一块区域 2,变量的命名规则 3,怎么使用变量 var 变量名 =(赋值) 10 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var name='name'; 8

[Js高手之路第一部]JavaScript上百例实战【新版】_8 javascript二重循环,break与continue语句

输出5行5列的表格 使用二重循环实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 table { 8 /*合并单元格之间的线*/ 9 border-collapse: collapse; 10 } 11 th,t

[Js高手之路第一部]JavaScript上百例实战【新版】_10 javascript输出一个对角线形状的div

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div { 8 width: 50px; 9 height: 50px; 10 background: palevioletred; 11 position: abso

[Js高手之路第一部]JavaScript上百例实战【新版】_20 读取样式与className和屏蔽空的锚

<input type="button" value="恢复样式" onclick="resetStyle();" /> <input type="button" value="修改样式" onclick="setStyle();" /> 1 <!DOCTYPE html> 2 <html lang="en"> 3 &l

[js高手之路]原型对象(prototype)与原型链相关属性与方法详解

一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手之路]一步步图解javascript的原型(prototype)对象,原型链 已经分享过了. function CreateObj(uName) {             this.userName = uName;             this.showUserName = function

[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist

promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习封装一个简易的异步队列 中的一道面试题( 页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ) ). promise的小实例: 1 function next1(){ 2 return new P

[js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息 [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法 [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义 [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin