本文主要是介绍九九乘法表的不同表现形式；，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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>
这篇关于九九乘法表的不同表现形式；的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
