DOM练习

先来做一个5x5的列表

let table = document.createElement(‘table’);

用for循环做5行跟5列

for (let i = 1; i <= 5; i++) {
let tr = document.createElement(‘tr’)
table.appendChild(tr)
for (let j = 1; j <= 5; j++) {
let td = document.createElement(‘td’)

然后行列相乘得到表格

td.innerHTML = i * j

用append ()方法给td加点击事件

tr.append(td)
td.onclick = function () {

获取td并循环td数组

let frd = document.getElementByTagName(‘td’)
for (let i = 0; i < frd.length; i++)
{

这里的点击事件是点击td之后整个表格改变样式

frd[i].style.background = “yellow”;
frd[i].style.color = “black”
}

这里是为单击的那个td改变样式 并且点击另外的之后原来点击的td会变回原样

this.style.background = “red”
}
}
}
document.body.appendChild(table)