1.js输出10*10表格+隔行变色(奇数行蓝色,偶数行粉色)
let tr = document.querySelectorAll('tr');//获取所有的tr
for (let j = 0; j < tr.length; j++) {
if (j % 2 === 0) {
tr[j].style.backgroundColor = 'blue';
} else {
tr[j].style.backgroundColor = 'pink';
}
}
结果如图:随机从0-9,(0,2,4,6,8蓝色),(1,3,5,7,9粉色)
2.js输出10*10表格+随机变色
// 封装随机数函数,随机生成rgb三原色
function bgcolor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = 'rgb(' + r + ',' + g + ',' + b + ')';
return color;
}
document.write('<table border="1"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>')
// 每一格随机变色
let td = document.querySelectorAll('td');//获取所有的td
for (let i = 0; i < td.length; i++) {
td[i].innerHTML = i;
td[i].style.backgroundColor = bgcolor();//调用函数,生成随机颜色
}
效果如图: