js操作DOM 动态生成表格实现乘法口诀表

最新推荐文章于 2021-11-18 00:27:51 发布

哈哈西西）

最新推荐文章于 2021-11-18 00:27:51 发布

阅读量443

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/SugarXiXixi/article/details/108753521

版权

代码如下（示例）：

<!DOCTYPE html>

<head>

<style>

.table{

width: 900px;

height: 450px;

algin:center;

border-collapse: collapse;

border: solid 1px black;

}

</style>

</head>

<!-- <script>

function show(str){

document.write('<img width="500px" src="../img/a1.jpg"')

}

show();

function add(x,y){

let rs=x+y

alert(rs)

return rs;

alert("sssss")

}

let a= add(152,34);

alert(a)

</script> -->

<!-- <script>

alert(a)

let a

var a

</script> -->

<!-- <script>

document.write("<hr/>")

let x

let y

for(x=9;x>=1;x--){

document.writeln("<tr>")

for(y=9;y>=x;y--){

document.write('<td>'+x+" * "+y+" = "+x*y +'</td>')

}

document.writeln("</tr>")

}

</script> -->

<body>

</body>

function cheng(x){

var table =document.createElement('table')

table.border=1

table.width='900px'

var tbody=document.createElement('tbody')

table.appendChild(tbody)

for(m=1;m<=x;m++){

tbody.insertRow(m-1)

for(n=1;n<=x;n++){

tbody.rows[m-1].insertCell(n-1)

if(n<=m){

tbody.rows[m-1].cells[n-1].appendChild(document.createTextNode(m+"*"+n+"="+m*n))

}else{

tbody.rows[m-1].cells[n-1].appendChild(document.createTextNode(" "))

}

document.body.appendChild(table)

}

cheng(19)

</script>

</html>

data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv') print(data.head())

实现效果

总结

使用了HTML DOM 定义的表格属性和方法，利用函数创建了x*x的乘法口诀，双层嵌套循坏展示乘法表达式。表格标签包裹该表达式。<tbody>元素调用了insertRow（）方法，插入某某行，<tr>元素调用insertCell（）方法，插入某某单元格。tbody.row[0].cells[0] 来引用新插入的单元格

哈哈西西）

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js操作DOM 动态生成表格实现乘法口诀表

1代码如下（示例）：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>函数</title><style>...
复制链接

扫一扫