原创 

原生js自己实现color picker 颜色选择器之table insertRow insertCell 方法的使用

分类:前端,Html5    1205人阅读    IT小君  2022-05-08 22:28

效果如图:

源码如下:

<!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>
支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

 工具推荐 更多»