九九乘法表的不同表现形式；

最新推荐文章于 2021-09-29 09:10:19 发布

sunlizhen

最新推荐文章于 2021-09-29 09:10:19 发布

阅读量519

点赞数

CC 4.0 BY-SA版权

分类专栏： JS类文章标签：九九乘法表 js

本文链接：https://blog.youkuaiyun.com/sunlizhen/article/details/76473950

JS类专栏收录该内容

202 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
table{
width:700px;
height:300px;
border:1px solid red;
border-collapse:collapse;
margin:0 auto;
}
tr,td{
border:1px solid red;
}
caption{
font-size:24px;
font-weight:700;
}
</style>
</head>
<body>

</body>
<script>

//第一个；
//获取body
var body = document.getElementsByTagName("body")[0];
//动态创建table
tab = document.createElement("table");
//动态创建caption
var cap = document.createElement("caption");
//将动态创建的caption添加到table中
tab.appendChild(cap);
//动态创建caption的文本；
var captext = document.createTextNode("使用for循环实现九九乘法表--左上角");
//将cap的文本添加到cap中；
cap.appendChild(captext);
// 将动态创建的table添加到body中；
body.appendChild(tab);
// 动态创建tr9行
for(var i = 1;i<=9;i++){
// 动态创建tr
var tr = document.createElement("tr");
// 将tr添加到table中；
tab.appendChild(tr);
for(var j = 1;j<=i;j++){
// 创建td
var td = document.createElement("td");
tr.appendChild(td);
// 创建td的文本
var tdtext = document.createTextNode(j+"*"+i+"="+i*j);
td.appendChild(tdtext);
}
}

//第二个；
//获取body
var body = document.getElementsByTagName("body")[0];
//动态创建table
tab = document.createElement("table");
//动态创建caption
var cap = document.createElement("caption");
//将动态创建的caption添加到table中
tab.appendChild(cap);
//动态创建caption的文本；
var captext = document.createTextNode("使用for循环实现九九乘法表--左下角");
//将cap的文本添加到cap中；
cap.appendChild(captext);
// 将动态创建的table添加到body中；
body.appendChild(tab);
// 动态创建tr9行
for(var i = 9;i>0;i--){
// 动态创建tr
var tr = document.createElement("tr");
// 将tr添加到table中；
tab.appendChild(tr);
for(var j = 1;j<=i;j++){
// 创建td
var td = document.createElement("td");
tr.appendChild(td);
// 创建td的文本
var tdtext = document.createTextNode(j+"*"+i+"="+i*j);
td.appendChild(tdtext);
}
}

//第三个；
/*
思路：
用空格代替，将有有文字的推到右边；
1行----8个td
2------7td
3------6td
9------0td
空的td是放在tr中的，所以要放在tr的循环中
*/
//获取body
var body = document.getElementsByTagName("body")[0];
//动态创建table
tab = document.createElement("table");
//动态创建caption
var cap = document.createElement("caption");
//将动态创建的caption添加到table中
tab.appendChild(cap);
//动态创建caption的文本；
var captext = document.createTextNode("使用for循环实现九九乘法表--右上角");
//将cap的文本添加到cap中；
cap.appendChild(captext);
// 将动态创建的table添加到body中；
body.appendChild(tab);
// 动态创建tr9行
for(var i = 1;i<=9;i++){
// 动态创建tr
var tr = document.createElement("tr");
// 将tr添加到table中；
tab.appendChild(tr);

for(var k = 1;k<=(9-i);k++){
//创建td
var td = document.createElement("td");
tr.appendChild(td);
}
for(var j = i;j>0;j--){
// 创建td
var td = document.createElement("td");
tr.appendChild(td);
// 创建td的文本
var tdtext = document.createTextNode(j+"*"+i+"="+i*j);
td.appendChild(tdtext);
}
}

//第四个；
/*
1.先将tr中的td倒置；
*/
//获取body
var body = document.getElementsByTagName("body")[0];
//动态创建table
tab = document.createElement("table");
//动态创建caption
var cap = document.createElement("caption");
//将动态创建的caption添加到table中
tab.appendChild(cap);
//动态创建caption的文本；
var captext = document.createTextNode("使用for循环实现九九乘法表--右下角");
//将cap的文本添加到cap中；
cap.appendChild(captext);
// 将动态创建的table添加到body中；
body.appendChild(tab);
// 动态创建tr9行
for(var i = 9;i>0;i--){
// 动态创建tr
var tr = document.createElement("tr");
// 将tr添加到table中；
tab.appendChild(tr);
for(var k = 1;k<=(9-i);k++){
// 创建td
var td = document.createElement("td");
tr.appendChild(td);
}
for(var j = i;j>0;j--){
// 创建td
var td = document.createElement("td");
tr.appendChild(td);
// 创建td的文本
var tdtext = document.createTextNode(j+"*"+i+"="+i*j);
td.appendChild(tdtext);
}
}
</script>
</html>