为每一个table单元格设置不同的背景颜色

最新推荐文章于 2024-04-10 10:45:23 发布
最新推荐文章于 2024-04-10 10:45:23 发布
阅读量3.4k 收藏
点赞数
文章标签： javascript matlab 前端 ViewUI
原文链接：https://yq.aliyun.com/articles/573426
版权
本章节介绍一下如何给表格的每一个单元格设置一个背景颜色，当然这里的方法比较笨拙，主要面向初学者。

代码如下:

 
 
 
  
 
   
 
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 
        

          20 
        
 
        

          21 
        
 
        

          22 
        
 
        

          23 
        
 
        

          24 
        
 
        

          25 
        
 
        

          26 
        
 
        

          27 
        
 
        

          28 
        
 
        

          29 
        
 
        

          30 
        
 
        

          31 
        
 
        

          32 
        
 
        

          33 
        
 
        

          34 
        
 
        

          35 
        
 
        

          36 
        
 
        

          37 
        
 
        

          38 
        
 
        

          39 
        
 
        

          40 
        
 		 
        
 
         
 
          <!DOCTYPE html> 
         
 
         
 
          < 
          html 
          > 
         
 
         
 
          < 
          head 
          > 
         
 
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          > 
         
 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
         
 
         
 
          </ 
          head 
          > 
         
 
         
 
          < 
          body 
          > 
         
 
         
 
          < 
          table 
          cellspacing 
          = 
          "0" 
          style 
          = 
          "width:980px;height:200px;" 
          > 
         
 
         
 
             
          < 
          tr 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "e91e6f" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "224071" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "f12339" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "1ea27e" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "224071" 
          ></ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
             
          < 
          tr 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "1ea27e" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "e91e6f" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "224071" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "f12339" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "1ea27e" 
          ></ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
             
          < 
          tr 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "e91e6f" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "224071" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "f12339" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "1ea27e" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "224071" 
          ></ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
             
          < 
          tr 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "1ea27e" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "e91e6f" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "224071" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "f12339" 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          bgcolor 
          = 
          "1ea27e" 
          ></ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
          </ 
          table 
          > 
         
 
         
 
          </ 
          body 
          > 
         
 
         
 
          </ 
          html 
          > 
         
 
        
 
 
   
 
  
 
 
 
 
上面的代码实现了我们的要求，当然方式很笨拙，就是为每一个单元格设置一个背景色，当然也可以使用javascript动态的方式设置，这里就不多介绍了，虽然麻烦，总归实现了。
 
 

 
 
原文发布时间为：2017-2-11
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
原文链接：为每一个table单元格设置不同的背景颜色
 


                

        

        




    




    

      

        

            

              
                
                  weixin_34072857
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
实现table某个单元格背景色设置

				
			

			

				

					sumiao64427的博客
				

				

					07-27
					
					1474
					
				

			

		

		

			
				
单元格背景色

			
		

	



                

              
                



	

		

			

				
					
QTableWidget中隔行换色的实现

				
			

			

				

					ykm0722的专栏
				

				

					11-11
					
					1万+
					
				

			

		

		

			
				
本来想找找QT里有没有现成的API的，结果没有找到，只能自己写了。
实现也好实现，QTableWidgetItem里面有修改背景色的API，直接调用，然后用循环控制隔行换色即可。
实现代码：
void testtt::changeColor(QTableWidget *tablewidget){
for (int i = 0;i rowCount();i++)
{
if (i % 2

			
		

	



                


  
              

                


	

		

			

				
					
Vue+el-table 修改表格 单元格横线边框颜色及表格空数据时边框颜色

					
最新发布

				
			

			

				

					蓝胖子的博客
				

				

					04-10
					
					1190
					
				

			

		

		

			
				
Vue+el-table 修改表格 单元格横线边框颜色及表格空数据时边框颜色

			
		

	





	

		

			

				
					
vue 引用封装好的table组件并实现根据不同的状态显示不同的字体颜色

				
			

			

				

					m0_57484291的博客
				

				

					05-07
					
					662
					
				

			

		

		

			
				
vue 引用封装好的table组件并实现根据不同的状态显示不同的字体颜色

实现后效果图





父组件代码



父组件js部分


<script>
    import tableModule from '@/components/teble/table.vue';
    export default{
        components:{tableModule},
    };
</script>

子组件template部分



子组件style部分


...

			
		

	



		

			
		



	

		

			

				
					
动态改变table 背景颜色

				
			

			

				

					vingo888的专栏
				

				

					02-08
					
					1452
					
				

			

		

		

			
				
 type="text/javascript">  function bgChange(){   if(!document.getElementsByTagName) return false;   var tables = document.getElementsByTagName("table");   for(v

			
		

	





	

		

			

				
					
table行添加背景色

				
			

			

				

					weixin_42014928的博客
				

				

					05-13
					
					862
					
				

			

		

		

			
				
table行添加背景色




			
		

	





	

		

			

				
					
html中table为每个单元格设置不同颜色和宽度

				
			

			

				

					09-28
				

			

		

		

			
				
最好不要在table里面直接设置宽度，高度等，在style里面添加设置，就不会出现无效问题，代码直接拷贝到body中间即可使用，下面有个示例，大家可以参考下

			
		

	





	

		

			

				
					
matlab GUI设置表格中单元格的背景颜色

				
			

			

				

					10-28
				

			

		

		

			
				
设置matlab GUI中，table对象不同单元格的颜色和 各个单元格字体颜色的方法，综合了matlab和html

			
		

	





	

		

			

				
					
element ui   el-table 动态改变 单元格 的颜色.txt

				
			

			

				

					11-11
				

			

		

		

			
				
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。

			
		

	





	

		

			

				
					
LigerGrid 行背景颜色设置

				
			

			

				

					05-20
				

			

		

		

			
				
代码使用VS2010所建立的asp.net Web空应用程序，实现了LigerGrid根据某个单元格的值判断设置所在行的背景颜色

			
		

	





	

		

			

				
					
JavaScript实现点击单元格改变背景色的方法

				
			

			

				

					10-22
				

			

		

		

			
				
这里，我们使用了一个名为`oldClr`的数组来存储每个单元格原来的背景颜色，以便恢复原状。当用户点击一个新的单元格时，我们将所有单元格恢复到原来的颜色，然后改变被点击单元格的颜色。  ```javascript // ... var...

			
		

	





	

		

			

				
					
使用Thymeleaf实现列表奇偶列背景色设置

				
			

			

				

					m0_52613676的博客
				

				

					03-28
					
					1195
					
				

			

		

		

			
				
直接上代码：
@RequestMapping("test")
public String test(ModelMap mm, HttpServletRequest request, HttpServletResponse response) {
      
    String[] strs = {"独坐幽篁里，", "弹琴复长啸。",
            "林深人不知，", "明月来相照。"};
    request.setAttribute("strs", strs);
    return "

			
		

	





	

		

			

				
					
VUE ElementUI Admin使用table时，选中某行或者鼠标移入某行时添加背景色

				
			

			

				

					lchmyhua88的博客
				

				

					01-03
					
					1491
					
				

			

		

		

			
				
VUE ElementUI Admin使用table时，选中某行或者鼠标移入某行时添加背景色

			
		

	





	

		

			

				
					
Matlab背景颜色修改

					
热门推荐

				
			

			

				

					AomanHao的博客
				

				

					09-01
					
					1万+
					
				

			

		

		

			
				
背景

将修改内容添加到matlab的matlab.prf文件中，文件路径为在matlab中运行prefdir的结果,直接添加这些内容保存就好。 

github主题制作地址，里面有多种matlab主题配色，参考github效果： 
https://github.com/scottclowe/matlab-schemer/tree/master/schemes

操作

1、matlab的命令窗口...

			
		

	





	

		

			

				
					
关于elementUI的table组件展示不同颜色的背景色

				
			

			

				

					weixin_39856480的博客
				

				

					07-23
					
					8341
					
				

			

		

		

			
				
<el-table :data="dataArray" border="true" stripe="true" :cell-class-name="cellStyle">

<el-table-column align="center" prop="cityName" label="城市名称" width="100"></el-table-column>

&l...

			
		

	





	

		

			

				
					
matlab 表格的颜色设置,如何根据表格中的数据修改合适的单元格颜色(在Matlab中)？...

				
			

			

				

					weixin_42502545的博客
				

				

					03-18
					
					1361
					
				

			

		

		

			
				
如果您阅读讨论carefully,您会发现UITABLE支持HTML内容……这是一个例子：X = rand(100,2);%# convert matrix of numbers to cell array of strings (right aligned)XX = reshape(strtrim(cellstr(num2str(X(:)))), size(X));%# find cells m...

			
		

	





	

		

			

				
					
表格的背景色

				
			

			

				

					liucai1018的博客
				

				

					04-23
					
					1735
					
				

			

		

		

			
				
知识点概述：
1、的bgcolor属性：用来指定整个表格的背景颜色
2、的bgcolor属性：用来指定表格中栏目行的背景颜色
3、标记的bgcolor属性：用来指定表格中一行的背景颜色
4、标记的bgcolor属性：用来指定表格中一格的背景颜色




代码demo：


<!-- 
1、的bgcolor属性：用来指定整个表格的背景颜色
2、的bgcolor属性：用来指定表格中

			
		

	





	

		

			

				
					
改变List列表控件中的字体颜色和单元格背景颜色

				
			

			

				

					hustmsencyyq的专栏
				

				

					01-04
					
					2227
					
				

			

		

		

			
				
1、首先应该有一个在对话框上的ListCtrl，并且ListCtrl属性为Report和多列模式
2、重载NM_CUSTOMDRAW消息，手工添加或者用wizard添加均可以。手工添加的格式如下：
     首先在消息映射中加入以下代码
     ON_NOTIFY(NM_CUSTOMDRAW, IDC_LIST_XXX, &CDlgXXX::OnNMCustomdrawXXX)

			
		

	





	

		

			

				
					
当鼠标移到单元格(tr、td)背景变色 多种解决方案

				
			

			

				

					zhouzilong502086525的专栏
				

				

					03-23
					
					1万+
					
				

			

		

		

			
				
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t

			
		

	





	

		

			

				
					
如何设置el-table选中行的第一个单元格的背景颜色

				
			

			

				

					05-25
				

			

		

		

			
				
例如，如果你想要设置选中行的第一个单元格的背景颜色为红色，可以这样做：  在 `el-table` 上添加 `row-class-name` 属性，并将其值设置为一个函数。该函数会接收当前行数据和行索引作为参数，并返回一个字符串，...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值