效果如图:
源码如下:
<!DOCTYPE HTML>
<html>
<style>
td{
width:40px;
height:30px;
cursor:pointer;
}
</style>
<script>
window.onload= function(){
let tableNode=document.createElement("table");
tableNode.border="1"
tableNode.id="colorpicker"
let r=0
let g=0
for(let x=0;x<11;x++){
let trNode=tableNode.insertRow();
r=0
for(let y=0;y<11;y++){
let tdNode=trNode.insertCell();
tdNode.style.backgroundColor =`RGB(${r}%,${g}%,0%)`
tdNode.onclick = function(){
alert(`${this.style.backgroundColor}`)
}
r=r+10
}
g=g+10
}
document.getElementById("bd").appendChild(tableNode);
}
</script>
<body id='bd'>
</body>
</html>