使用原生js
js部分:
<script>
document.write('<table>')
for (var i = 1; i <= 9; i++) {
document.write('<tr>')
for (var j = 1; j <= i; j++) {
document.write('<td>')
document.write(j + "x" + i + "=" + i * j + " ");
document.write('</td>')
}
document.write('</br>')
document.write('</tr>')
}
document.write('<table>')
</script>
CSS部分:
<style>
table{
border: 2px solid lightslategray;
border-collapse: collapse;
margin: 10px auto;
}
tr,
td {
height: 20px;
border: 2px solid lightslategray;
}
</style>
使用DOM
js部分:
<script>
var tab = document.createElement('table');
document.body.appendChild(tab);
for (i = 1; i <= 9; i++) {
var trs = document.createElement('tr');
tab.appendChild(trs)
for (j = 1; j <= i; j++) {
var tds = document.createElement('td');
trs.appendChild(tds);
tds.innerHTML = j + "x" + i + "=" + j * i + " "
};
};
</script>
CSS部分:
<style>
table{
border: 2px solid lightslategray;
border-collapse: collapse;
margin: 10px auto;
}
tr,
td {
height: 20px;
border: 2px solid lightslategray;
}
</style>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/81ba09feb813cca30ef3878a3ce322be.png)